I am creating an app using firebase and react.js. When I reload the app, only the very last image shows up, when instead all of them should be loaded on the first page. Here is my handleUpload function where the issue lies (Updated):

    const handleUpload = () => {
    //const storageRef = ref(storage, `images/${image.name}`);
    const randomId = doc(collection(db, "temp")).id;
    const storageRef = ref(storage, `images/${randomId}`);
    const uploadTask = uploadBytesResumable(storageRef, image);

    uploadTask.on(
        "state_changed",
        (snapshot) => {
            //Progress function ... (shows the load bar)
            const progress = Math.round(
                (snapshot.bytesTransferred / snapshot.totalBytes) * 100
            );
            setProgress(progress);
        },
        (error) => {
            //Error Function...
            console.log(error);
            alert(error.message);
        },
        async () => {
            //complete function
                const url = await getDownloadURL(storageRef);
                const docRef = await addDoc(collection(db, "posts"), {
                    imageURL: url, 
                    caption: caption, 
                    username: username, 
                    timestamp: serverTimestamp()
                });

                console.log("THE APP HAS POSTED");
                setProgress(0);
                setCaption('');
                setImage(null);
                setUrl('');
            }
        )
            

    }

Here is my storage console after restarting and posting 2 photos from an iPhone:

There should be 2 photos there, but only the latest one shows up, with the name ${image.name}, which I don't understand because I have that line commented out.

Note: this issue only occurs when someone uploads on a phone since there are no file names on a phone, just a picture from a camera roll. Is there a way to fix this that anyone can think of?