我有一个视频库，里面有正在Map的视频。我一次播放一个视频时遇到了问题。相反，我得到了错误，Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'play')。我认为这是因为函数是asnyc，我将播放函数更改为async/await。仍然不起作用。这种格式适用于一个视频，但不能多个。
我希望能够播放视频

export default function VideoGallery() {
  const [videoData, setVideoData] = useState([]);
  const [showControls, setShowControls] = useState(false);
  const vidRef = useRef();

  //bunch of code

  const playVideo = async (e) => {
    await vidRef.current.play();
    setShowControls(true);
  };

  return (
    <div className="relative w-full p-1 group">
      <div className=" flex flex-wrap -m-1 md:-m-2 ">
        {videoData.map((data) => {
          const videoURL = data.videoURL.replace(
            "https://firebasestorage.googleapis.com",
            ""
          );
          return (
            <>
              <div
                key={data.videoURL}
                className="relative flex w-full md:w-1/3 sm:w-1/2 flex-wrap group"
              >
                <div className="relative w-full p-1 group">
                  <video
                    src=...
                    preload="metadata"
                    volume="true"
                    controls={showControls ? "controls" : ""}
                    controlsList="nodownload"
                    refs={vidRef}
                  />
                  <div className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2">
                    <BsPlayCircle
                      className="text-[#fa9204] text-6xl cursor-pointer"
                      onClick={playVideo}
                      refs={vidRef}
                    />
                  </div>
                </div>
              </div>
            </>
          );
        })}
      </div>
    </div>
  );
}