firebase storage image upload fails the first time, but subsequent upload attempts load

so, I'm new to react native and firebase storage and I am trying to upload images to storage which fails the first time but if I try immediately afterwards it works with no issues at all and can see the photo in the storage.

The error I am getting on the first attempt is:

{"code":"storage/unknown","customData":{},"name":"FirebaseError","status_":400,"_baseMessage":"Firebase Storage: An unknown error occurred, please check the error payload for server response. (storage/unknown)","line":20330,"column":28,"sourceURL":"http://192.168.1.12:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false"}

This is the code below:

const submitPhoto = async () => {
    let id = await auth.currentUser.uid;
    // Create file metadata including the user id
    var metadata = {
      customMetadata: {
        userUpload: id,
      },
    };
    var ref;
    try {
      const response = await fetch(image);
      const blob = await response.blob();
      let imageName = image.substring(image.lastIndexOf('/') + 1);
      setFileName(imageName);
      ref = await firebase
        .storage()
        .ref('climbPhotos')
        .child(filename)
        .put(blob, metadata);
      console.log(ref.metadata.name);
      console.log(ref.metadata);
    } catch (error) {
      console.log(JSON.stringify(error));
      Alert.alert('Server Error', 'Error has occurred on image upload');
    }
    setImage(null);
  };

I am at a lost with this as like I said it occurs only on the first attempt of me opening that particular screen and uploading any image for the first time.

So I figured out what the issue was, and it's all to do with the upload using state values for the filename apparently even though the value was being set (i checked with console logs immediately after being set) the value wasn't always being passed correctly. whether this was the issue or not it seems my issue has been solved by removing states from the child.

      const response = await fetch(image);
      const blob = await response.blob();
      let imageName = image.substring(image.lastIndexOf('/') + 1);
      setFileName(imageName);
      console.log(' vvvv ');
      console.log(filename);
      console.log(imageName);
      console.log(image);
      console.log(' ^^^ ');
      var imageRef = firebase.storage().ref('climbPhotos').child(imageName);

26a51e0a-8ab8-4b62-aa4a-46a3d777e4fa.jpeg file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252FRockClimbingApp-cde1c400-dff9-44c8-8840-c83b731c56de/ImagePicker/26a51e0a-8ab8-4b62-aa4a-46a3d777e4fa.jpeg

as you can see the log shows the image and imageName but not the filename due to states being async