I have a button outside of React Video Player in my project and I should implement the following logic: when we click on this button, we get a full screen for the video. Here's the simplified example of the code that I'm trying to use which is not working. What do I do wrong? :) Thanks for help in advance

import "./styles.css";
import React, { useState, useEffect } from "react";
import ReactPlayer from "react-player";

export default function App() {
  const [vidRef, setVidRef] = useState(null);
  const setVideoToFullScreen = () => {
    const el = vidRef.current;
    console.log(el);
    if (el.requestFullscreen) {
      el.requestFullscreen();
    } else if (el.msRequestFullscreen) {
      el.msRequestFullscreen();
    } else if (el.mozRequestFullScreen) {
      el.mozRequestFullScreen();
    } else if (el.webkitRequestFullscreen) {
      el.webkitRequestFullscreen();
    }
  };
  useEffect(() => {
    setVidRef(document.querySelector(".react-player"));
  }, []);
  return (
    <div className="App">
      <button onClick={setVideoToFullScreen}>Full Screen</button>
        <ReactPlayer
          className="react-player"
          controls
          ref={vidRef}
          url="https://www.youtube.com/watch?v=OIFASfPkw9g"
        />
    </div>
  );
}