React - using form, context and firebase

I have created a context that holds initial state of my object:

  const [vehicles, setVehicles] = useState([
    {
      id: 0,
      brand: "Example brand",
      model: "Exaple model",
      prodYear: 2021,
      bodyType: "Sedan",
      registrationNum: "XYZ98791",
      tankCapacity: 60,
      fuelConsumption: 8,
      fuelType: "Petrol",
      photo: url,
    },
  ]);

Also a method that i use in my form to add new object to array:

const addVehicle = (
    brand,
    model,
    prodYear,
    bodyType,
    registrationNum,
    tankCapacity,
    fuelConsumption,
    fuelType,
    photo
  ) => {
    setVehicles([
      ...vehicles,
      {
        id: Math.floor(Math.random() * 100),
        brand,
        model,
        prodYear,
        bodyType,
        registrationNum,
        tankCapacity,
        fuelConsumption,
        fuelType,
        photo,
      },
    ]);
  };

PROBLEM I managed to create firebase storage, and i am able to display photo as thumbnail in form component, BUT i want to pass url form firebase to my other copmponents/pages by context. I just cant straight asign url to "photo" property because i get url in a promise, what makes it undefined on load. My upload function:

const [photo, setPhoto] = useState(null);
const [url, setUrl] = useState("");
const [progress, setProgress] = useState(0);

const handleUpload = () => {
    const uploadTask = storage.ref(`photos/${photo.name}`).put(photo);
    uploadTask.on(
      "state_changed",
      (snapshot) => {
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgress(progress);
      },
      (error) => {
        console.log(error);
      },
      () => {
        storage
          .ref("photos")
          .child(photo.name)
          .getDownloadURL()
          .then((url) => {
            setUrl(url);
          });
      }
    );
  };

Any advive would be appreciated!