image compression returning null (compress image before uploading it)

How to / Third Party Tooling
1

I’m trying to compress the image before uploading it to firebase storage and if I run the compression within the takepicture function it works fine but it causes a huge lag in taking the picture.

I’m putting it as another function to be called before it is uploaded and it results in null.

Why is this happening?

Taking picture, image compression and upload to firebase code

 const takePicture = async () => {
    if (cameraRef.current) {
      const options = { quality: 1, base64: true, skipProcessing: true };
      const result = await cameraRef.current.takePictureAsync(options);
      setImageResult(result.uri);
      // for the image preview
      await cameraRef.current.pausePreview();
      setIsPreview(true);
    }
  };

  //compression image
  const compressimagestuff = async () => {
    const manipResult = await ImageManipulator.manipulateAsync(
      imageResult,
      console.log(`this is image result ${imageResult.uri}`),
      [],
      { compress: 0.3, format: ImageManipulator.SaveFormat.JPEG }
      );
    

// this returns null as well as ( setCompressedImage(manipResult); )
    return manipResult.url;
  };
  
  
  // uploading it to firebase
  const uploadImageAsync = async (ToTheCloud) => {
    // this is getting null so nothing get uploaded
let compressedImageUrl = await compressimagestuff(compressedImage);
        var user = firebase.auth().currentUser.uid;
    const blob = await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onload = function () {
        resolve(xhr.response);
      };
      xhr.onerror = function (e) {
        console.log(e);
        reject(new TypeError('Network request failed'));
      };
      xhr.responseType = 'blob';
      xhr.open('GET', ToTheCloud, true);
      xhr.send(null);
    });

    const ref = firebase
      .storage()
      // the file that it will get saved to
      .ref(user + '/FrontPic/')
      // giving it a unique name
      .child(await uuid.v4())

    const imageurl = await snapshot.ref.getDownloadURL();
    // send to database
    const snapshot = await ref.put(blob);
    blob.close();
    return await snapshot.ref.getDownloadURL();
  };

Button that calls the function

    <TouchableOpacity onPress={() => { uploadImageAsync(compressedImage) >