Как записать элемент холста в react.js

Question

Мне нужно программно записывать видео из Zoom SDK. При запуске видеопотока с масштабированием мне нужно записать это видео. У меня есть пример кода на чистом javascript. Как написать этот код в react js.

        var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");

var video = document.querySelector("video");

var colors = ["red", "blue", "yellow", "orange", "black", "white", "green"];
function draw (){
   ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
 ctx.fillRect(0, 0, canvas.width, canvas.height);
}
draw();

var videoStream = canvas.captureStream(30);
var mediaRecorder = new MediaRecorder(videoStream);

var chunks = [];
mediaRecorder.ondataavailable = function(e) {
 chunks.push(e.data);
};

mediaRecorder.onstop = function(e) {
 var blob = new Blob(chunks, { 'type' : 'video/mp4' });
 chunks = [];
 var videoURL = URL.createObjectURL(blob);
 video.src = videoURL;
};
mediaRecorder.ondataavailable = function(e) {
 chunks.push(e.data);
};

mediaRecorder.start();
setInterval(draw, 300);
setTimeout(function (){ mediaRecorder.stop(); }, 5000);

HTML-теги:

      <canvas width="300" height="300"></canvas>
<video autoplay controls></video>

Ссылка https://jsfiddle.net/8Lg0enh2/