Video Recording React.js Component using Recordrtc

VideoRecording.jsx

import React, { useState } from "react";
import RecordRTC from "recordrtc";

function VideoRecorder() {
  const [recordRTC, setRecordRTC] = useState(null);
  const [stream, setStream] = useState(null);

  const startRecording = () => {
    navigator.mediaDevices
      .getUserMedia({ video: true, audio: true })
      .then((stream) => {
        const recorder = RecordRTC(stream, {
          type: "video",
          mimeType: "video/webm"
        });
        recorder.startRecording();
        setRecordRTC(recorder);
        setStream(stream);
      })
      .catch((err) => console.error(err));
  };

  const stopRecording = () => {
    if (recordRTC) {
      recordRTC.stopRecording(() => {
        // this is the logic for downloading the video replace this with necessary stuff        
        const blob = recordRTC.getBlob();
        const videoURL = URL.createObjectURL(blob);
        const downloadLink = document.createElement("a");
        downloadLink.href = videoURL;
        downloadLink.download = "my_video.webm";
        downloadLink.click();
        if (stream) {
          stream.getTracks().forEach((track) => track.stop());
        }
      });
    }
  };

  return (
    <div>
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>
    </div>
  );
}

export default VideoRecorder;