我想在react中绘制(使用html5画布)内部视频

import React, { useRef, useEffect } from 'react';

const VideoCanvas = () => {
  const canvasRef = useRef(null);
  const videoRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const video = videoRef.current;

    const context = canvas.getContext('2d');

    const drawFrame = () => {
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      requestAnimationFrame(drawFrame);
    };

    video.addEventListener('play', drawFrame);

    return () => {
      video.removeEventListener('play', drawFrame);
    };
  }, []);

  return (
    <div>
      <canvas ref={canvasRef} width={640} height={480} />
      <video ref={videoRef} src="path/to/video.mp4" controls />
    </div>
  );
};

export default VideoCanvas;