Can’t Properly Download `MediaRecorder` Video Output [duplicate]

I’m building a simple React app (using Create React App + TypeScript) to record content from the user’s camera and mic, and save it to a downloadable video file (preferably mp4).

Currently, it seems like I can record video data, but when I download the file output it won’t open in QuickTimePlayer. Instead says the file is not compatible.

For reference, I’m on an M1 MacBook running MacOS BigSur Version 11.4. Also, I’m extremely new to React development and (although I’ve done a fair bit of TypeScript dev) I’ve never used the MediaRecorder API.

Kindly let me know what errors I made. Thank you!

import { FC, useRef, useState, useEffect } from 'react';

const App: FC = function () {

  /* ==== Component Data ==== */

  const recordingPreviewRef = useRef<HTMLVideoElement>(null!);
  const recordingDeviceRef = useRef<MediaRecorder>(null!);
  const recordingChunksRef = useRef<Blob[]>(null!);
  const [recordingURL, setRecordingURL] = useState("");
  const [isRecording, setRecordingState] = useState(false);
  

  /* ==== Helper Functions ==== */

  async function setUpRecording() {
    // Get User Media
    let recordingMedia = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });

    // Set Up Recording Preview
    recordingPreviewRef.current.srcObject = recordingMedia;
    recordingPreviewRef.current.play();
    
    // Set Up Recording Device
    recordingDeviceRef.current = new MediaRecorder(recordingMedia, { mimeType: 'video/mp4' });
    recordingDeviceRef.current.ondataavailable = (event) => {recordingChunksRef.current.push(event.data)};
  }

  function startRecording() {
    setRecordingState(true);
    recordingDeviceRef.current.start();
    recordingChunksRef.current = [];
    console.log('Recording...');
  }

  function stopRecording() {
    recordingDeviceRef.current.stop();
    setRecordingState(false);
    saveRecording();
    console.log('Recording stopped.');
  }
  
  function toggleRecording() {
    if (!isRecording) {
      startRecording();
    } else {
      stopRecording();
    }
    // recordingDeviceRef.current.requestData();
  }

  function storeRecordingChunks(event: BlobEvent) {
    if (event.data.size > 0) {
      recordingChunksRef.current.push(event.data);
    }
  }

  function saveRecording() {
    let videoFile = new Blob(recordingChunksRef.current, { type: 'video/mp4' });
    let videoURL = window.URL.createObjectURL(videoFile);
    setRecordingURL(videoURL)
    recordingChunksRef.current = [];
  }

  /* ==== Component Life-Cycle Events ==== */

  useEffect(() => { 
    setUpRecording()
  }, [])


  /* ==== JSX Markup ==== */

  return (
    <>
      <video ref={recordingPreviewRef} muted></video>
      <section>
        <h1>Hello: {MediaRecorder.isTypeSupported('video/webm') ? 'A' : 'B'}</h1>
        <button onClick={() => toggleRecording()}>{ !isRecording ? 'Start Recording' : 'Stop Recording'}</button>
        <a href={recordingURL} download={'RecordedVideo.webm'}>Download</a>
      </section>
    </>
  )
}

export default App;