Tengo un <Dropzone/> en mi sitio web de reacción que permite a mis usuarios cargar varias imágenes simplemente haciendo clic o arrastrando y soltando.

Cuando subo las imágenes, se guardan en mi almacenamiento de Firebase, pero las URL para cada imagen individual no se configuran y aparece un error de Firebase que dice:

 "Uncaught (in promise) FirebaseError: Firebase Storage: Object 'propertyImages/Picture1.png+4b80d-6dd0-4b40-cadc-8e7845677bbd' does not exist. (storage/object-not-found) { "error": { "code": 404, "message": "Not Found." } }"

No sé por qué no está configurando la URL para cada imagen, creo que es porque está sobrescribiendo las URL de descarga anteriores. ¿Cómo puedo hacer que Dropzone funcione correctamente?

¿Qué estoy haciendo mal?

Aquí está mi código:

 import Dropzone, {useDropzone} from "react-dropzone" const [urls,setUrls] = useState([]); const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDropAccepted: onFilesDrop, maxFiles: 5 }); function onFilesDrop(files) { files.map((item, index) => { let uploadTask = storage.ref(`propertyImages/${item.name}+${uuid()}`).put(item); uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) { setUrls(prevState => { return [...prevState, downloadURL] }) }) }) } return ( <CardTitle className="mb-3 h4">Property Images (MAX IMAGES 5)</CardTitle> <div className="dropzone" > <Dropzone onDrop={acceptedFiles => onFilesDrop(acceptedFiles) } > {({ getRootProps, getInputProps }) => ( <div> <div className="dz-message needsclick" {...getRootProps()} > <input {...getInputProps()} /> <div className="dz-message needsclick"> <div className="mb-3"> <i className="display-4 text-muted bx bxs-cloud-upload" /> </div> <h4>Drop files here or click to upload.</h4> </div> </div> </div> )} </Dropzone> )