AudioFile range error, network request error

Question

I keep getting a range error and network request error when i trey to upload the audio to firebase storage and firestore. I had looked for a better option to pick audio but wasnt able to find one, i could use some help.

  async function pickAudio() {
     try {
      const result = await DocumentPicker.getDocumentAsync({
        type: "audio/*", // Specify the MIME type for audio files
        copyToCacheDirectory: false,
      });

      if (!result.canceled) {                                                                                             x szsc
        setAudioFile(result.assets[0].uri);
        setAudioFilename(result.assets[0].name);
        const response = await fetch(result.assets[0].uri);
        const blob = await response.blob();
        setAudioBlob(blob);
      }
    } catch (error) {
      console.error("Error picking audio:", error);
    }
  }

  async function pickImage() {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      quality: 1,
      aspect: [3, 4],
    });

    if (!result.canceled) {
      setImageFile(result.assets[0].uri);
      const filenameParts = result.assets[0].uri.split("/")
      setImageFilename(filenameParts[filenameParts.length - 1]);
      const response = await fetch(result.assets[0].uri);
      const blob = await response.blob();
      setImageBlob(blob);
    }
  }

  async function handleUpload() {
    if (audioFile && imageFile) {
      await upload(audioBlob, imageBlob);
    } else {
      alert("Please select both audio and album art.");
    }
  }

  async function upload(audioBlob, imageBlob) {
    const audioStorageRef = ref(storage, "audioSermon/" + new Date().getTime());
    const audioUploadTask = uploadBytesResumable(audioStorageRef, audioBlob);

    const imageStorageRef = ref(storage, "albumArt/" + new Date().getTime());
    const imageUploadTask = uploadBytesResumable(imageStorageRef, imageBlob);

    const [audioSnapshot, imageSnapshot] = await Promise.all([
      audioUploadTask,
      imageUploadTask,
    ]);

    try {
      const audioDownloadUrl = await getDownloadURL(audioSnapshot.ref);
      const imageDownloadUrl = await getDownloadURL(imageSnapshot.ref);

      await saveRecord(
        audioDownloadUrl,
        imageDownloadUrl,
        title,
        preacher,
        series,
        new Date().getTime()
      );

      setAudioFile("");
      setImageFile("");
      console.log("Upload completed");
      navigation.navigate("admin/adManage/audioSermon");
    } catch (error) {
      console.error("Error getting download URL or saving record:", error);
    }
  }

  async function saveRecord(
    audioUrl,
    imageUrl,
    title,
    preacher,
    series,
    createdAt
  ) {
    try {
      const docRef = await addDoc(collection(db, "audioSermon"), {
        audioUrl,
        imageUrl,
        title,
        preacher,
        series,
        createdAt,
        isFeatured: "0",
      });
      console.log("Record saved with document ID:", docRef.id);
    } catch (e) {
      console.error("Error saving record:", e);
    }
  }``

I am especially skeptical about the pickAudio function. The pickImage works properly when isolated but i get wrong format for the audio when it decides to upload. uploading just about some bytes