application/octet-stream/mp3 not playing in Safari

Question

Our React app allows users to connect to their zoom account to fetch the recordings and add it to their App Library. Eventually these uploaded audio can be played across the browsers from the /library tab. It works on all browsers except on Safari.

Code - the audio is uploaded from zoom to firebase storage. The mp3 from firebase storage is used to play the audio on browser. In safari it simply says, "Error: failed to load mp3 at url". I tried saving the blob as file and then uploading it to firebase, creating a new blob with mime type mp3. I am React noob, so I am not sure of the right technical terms to look for. Any directions to fix this would be appreciated.

const createRecordInDB = async (
    audioURL,
    sid,
    audioDuration,
    newTitle,
    meetingID
  ) => {
    const dateTime = Date.now();
    const timestamp = Math.floor(dateTime / 1000);
    var input = {
      call_duration: audioDuration,
      called_at: timestamp,
      recording_name: newTitle,
      recording_url: audioURL,
    };
    const ref = firebase.database().ref(`testing-library/${uid}`);
    await ref.push(input);
    setIsUploadng(false);
  };
  //
  const addToLibrary = async (event, url, newTitle, meetingID) => {
    event.preventDefault();
    if (!isUploading) {
      setIsUploadng(true);
      const token = getJWT();
      var uniqueID = uuidv4();
      var fileName = uniqueID + ".mp3";
      const download_url = `${url}?access_token=${token}`;
      const imagePath = `imageuploads/${fileName}`;
      fetch(download_url)
        .then((res) => {
          return res.blob();
        })
        .then(async (blob) => {
          console.log(blob.type); // application/octet-stream
          let metadata = {
            cacheControl: "public",
            contentType: "audio/mp3",
          };
          // const newBlob = new Blob([blob], { type: "audio/mp3" });
          // var file = new File([newBlob], fileName, {
          //   lastModified: Date.now(),
          // });
          firebase
            .storage()
            .ref()
            .child(imagePath)
            .put(blob, metadata)
            .then(function (snapshot) {
              return snapshot.ref.getDownloadURL();
            })
            .then((url) => {
              // Get audio duration..
              console.log("Firebase storage uploaded : ", url);
              var audioContext = new (window.AudioContext ||
                window.webkitAudioContext)();
              var request = new XMLHttpRequest();
              request.open("GET", url, true);
              request.responseType = "arraybuffer";
              request.onload = function () {
                audioContext.decodeAudioData(request.response, function (
                  buffer
                ) {
                  var duration = buffer.duration;
                  console.log(
                    "The duration of the file is of: " +
                      parseInt(duration) +
                      " seconds"
                  );
                  createRecordInDB(
                    `${conf.storageURL}${imagePath}`,
                    uniqueID,
                    parseInt(duration),
                    newTitle,
                    meetingID
                  );
                });
              };
              // Start Request
              request.send();
            });
        })
        .catch((error) => {
          console.error(error);
          setIsUploadng(false);
        });
    }
  };