Using Canvas for rendering video in React

I'm new to React. I'm trying to create a <canvas> that will render a video in React so that I can provide a restriction on video-downloading as mentioned here(the paint on canvas part). (I know I can't prevent users from downloading it, just a preventive measure from my side for newbie users).

I was using this for HTML-JS :

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

var video = document.createElement("video");
video.src = "http://techslides.com/demos/sample-videos/small.mp4";
video.addEventListener('loadeddata', function() {
  video.play();  // start playing
  update(); //Start rendering
});

function update(){
  ctx.drawImage(video,0,0,256,256);   
  requestAnimationFrame(update); // wait for the browser to be ready to present another animation fram.       
}

and

<canvas id="canV" width='256' height='256'></canvas>

Now, How can I do this in React? Also, any other simple preventive measures to prevent the videos from getting downloaded?

Also, there is this answer, Can I do something like this in react/gatsby? If yes, then please guide.

Thanks.