Estoy usando react js para cargar imágenes en firebase junto con el contenido de su publicación hasta ahora. He logrado cargar una imagen y su documento, pero el problema es que cuando intento colocar la URL de la imagen junto con el documento, dice que la imagen no existe y cuando reviso de vuelta en mi cuenta de consola encuentro la imagen cargada

abajo están mis códigos de carga

 const createPost = async () => { if(image == null){ const cover = "default"; await addDoc(postsCollectionRef, { title, postContent, created_at, cover, author: {name: auth.currentUser.displayName, id: auth.currentUser.uid} }); }else{ const cover = addOn+image.name; const storage = getStorage(); var storageRef = await ref(storage, `images/${cover}`); const upload = uploadBytesResumable(storageRef,image,image); upload.on("state_changed" , alert("success") , alert); await getDownloadURL(storageRef).then(function(url){ console.log(url); addDoc(postsCollectionRef, { title, postContent, created_at, cover: {cover, url}, author: {name: auth.currentUser.displayName, id: auth.currentUser.uid} }); }); } navigate("/");};

Si puedo obtener ejemplos relevantes, será muy útil. Algunos dicen que el problema es que estoy llamando a la URL antes de que la imagen no se cargue, así que traté de agregar esperar pero aún no funciona.