I am trying to upload an image to a cloud storage and received an post 400 error

The file is in initialize in another component.

Thanks for help

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]);