如何在没有外部库的情况下在 React 中播放/暂停视频？

我的网页中有一个视频标签 () 和一个“播放/暂停”按钮，当用户单击它时，视频开始/停止播放。如果我不允许使用 js 来调用“getElementById”然后使用 play()/pause() 内置方法，我该如何在 React 中执行此操作。 任何想法？

React 函数组件的更新示例：

import React, { useRef} from 'react'

function myComponent(props) {
  const vidRef = useRef(null);
  const handlePlayVideo = () => {
    vidRef.current.play();
  }
  return (
    <video ref={vidRef}>
      <source src={[YOUR_SOURCE]} type="video/mp4" />
    </video>
  )
}