Upload an audio blob to AWS S3 Using Amplify

I'm trying to convert a Blob media to a file before uploading it to an AWS S3.

Underneath a simplified version of the code in React.

const Audio2S3= async (blb)=>{
const file= await fetch(blb).then(
    r=>r.blob()
).then(
    blobFile=> new File([blobFile], "audio1.mp3",{
        type:"audio/mpeg"
    })
);
try {
  await Storage.put("Audio_test", file, {
    // await Storage.put(`${Date.now()}-${file}`, file, {
  
      contentType:"audio/mpeg",
      level:"protected"
  })
} catch (err) {
  console.log("File upload Error", err);
}

const AudioS3 = () => (
  <div>
    <ReactMediaRecorder
      audio
      whenStopped={(blobUrl) => console.log(blobUrl)}
      render={({ status, startRecording, stopRecording, mediaBlobUrl }) => (
        <div>
          <p>{status}</p>
          <button onClick={startRecording}>Start Recording</button>
          <button onClick={stopRecording}>Stop Recording</button>
          <audio src={mediaBlobUrl} controls autoPlay />

          <button onClick={AplS3(mediaBlobUrl)}>Upload Recording</button>
        </div>
      )}
    />
  </div>
);
export default AudioS3;

Though I managed to get the file on S3 bucket, the file is not and audio track and unusable.

The Network tracking on Inspect Element depicts the file chunks encoding before the upload to S3:

Something wrong with the blob conversion to file I guess but I did not know how to fix it after consulting many references.