在React/JSX/NextJS中有没有办法让一个点击gif的视频全屏自动打开？

import React, { useState } from 'react';

function VideoComponent() {
  const [isFullScreen, setIsFullScreen] = useState(false);

  // 点击事件处理函数
  const handleClick = () => {
    const videoElement = document.getElementById('video');

    if (!isFullScreen) {
      // 进入全屏
      if (videoElement.requestFullscreen) {
        videoElement.requestFullscreen();
      } else if (videoElement.mozRequestFullScreen) {
        videoElement.mozRequestFullScreen();
      } else if (videoElement.webkitRequestFullscreen) {
        videoElement.webkitRequestFullscreen();
      } else if (videoElement.msRequestFullscreen) {
        videoElement.msRequestFullscreen();
      }
    } else {
      // 退出全屏
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }

    // 更新全屏状态
    setIsFullScreen(!isFullScreen);
  };

  return (
    <div>
      <video id="video" src="path/to/video.mp4" onClick={handleClick} />
    </div>
  );
}

export default VideoComponent;