使用react状态更新视频src -这是可能的吗？

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

const VideoPlayer = () => {
  const [videoSrc, setVideoSrc] = useState('initial-video-src.mp4');

  useEffect(() => {
    // 监听videoSrc状态变化
    // 在状态变化时更新视频的src属性
    const videoElement = document.getElementById('video');
    videoElement.src = videoSrc;
  }, [videoSrc]);

  const handleButtonClick = () => {
    // 点击按钮时更新videoSrc状态
    setVideoSrc('new-video-src.mp4');
  };

  return (
    <div>
      <video id="video" controls>
        <source src={videoSrc} type="video/mp4" />
      </video>
      <button onClick={handleButtonClick}>更新视频</button>
    </div>
  );
};

export default VideoPlayer;