Uncaught (in promise) FirebaseError: Firebase Storage: Object 'images/38564af7conno.PNG' does not exist. (storage/object-not-found) react js

Question

I am using react js to upload images in firebase alongside its post contents so far I have managed to upload an image and its doc but the problem is when I try to put image URL along doc it says the image does not exist and when I check back in my console account I find the uploaded image

down below is my upload codes

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("/");};

If I can get relevant examples it will be very helpful some says that the problem is that i am calling url before the image is not upload so i tried to add await but still does not work