Estoy tratando de cargar una imagen en un almacenamiento en la nube y recibí un mensaje de error 400

El archivo se está inicializando en otro componente.

Gracias por la ayuda

 const projectStorage = getStorage(); useEffect(() => { const storageRef = ref(projectStorage, file.name); uploadBytes(storageRef, file).then((snap) => { let percentage = (snap.bytesTransferred / snap.totalBytes) * 100; setProgress(percentage); console.log('File Uploaded'); }, (err) => { setError(err); }, async () => { //this url doesnt change the setstate url becuase it is in seperate score const url = await storageRef.getDownloadURL(); setUrl(url); }) }, [file]);