I'm trying to create a popup that will play a video and when it clicked while playing it will pause and hide the popup.

This is when the user clicks to show and play the video

<div className="mn sr" onClick={() =>  vidControl("PLAY")}>
       Showreel
</div>

It will make this div visible and play the video

import Video from "../assets/videos/showreel/showreel.mov";

<div className="showreel" style={videoOpen ? { display: "block" } : { display: "none" }}>
      <ReactPlayer
        url={Video}
        className="sr-video"
        onClick={() => vidControl("PAUSE")}
      />
</div>

This function act as the video control or so-called

const vidControl = (params) => {
    const video = document
      .querySelector(".showreel")
      .getElementsByTagName("video")[0];
    if (params === "PLAY") {
      video.play();
      setVideoOpen(true);
    } else {
      video.pause();
      setVideoOpen(false);
    }
  };

I have no problem when running it locally, but when I deployed and click to play it, there is an error says.

Uncaught (in promise) DOMException: The element has no supported sources.

I've searched for the same error and tried to fix it with this code since they say I gotta handle the promise but in the end, it doesn't fix my problem.

async function videoPromise() {
    const video = document
      .querySelector(".showreel")
      .getElementsByTagName("video")[0];
    try {
      await video.play();
      setVideoOpen(true);
      console.log("play");
    } catch (err) {
      video.pause();
      setVideoOpen(false);
      console.log(err, "error");
    }
  }

Is there any problem with the code or the logic here? Appreciate any kinda responses, thanks before.