'YT' is not defined - Youtube Player API

I am using Youtube Player API on my React site. When I try it on the site, it gives this error: TypeError: Cannot read property 'ready' of undefined. Here is the code I am using:

var player;
function loadVideo() {
    window.YT.ready(function () {
      new window.YT.Player("player", {
        height: "390",
        width: "640",
        videoId: "M7lc1UVf-VE",
        events: {
          onReady: onPlayerReady,
          onStateChange: onPlayerStateChange,
        },
      });
    });

    function onPlayerReady(event) {
      event.target.playVideo();
      player = event.target;
    }

    function onPlayerStateChange(event) {
      var videoStatuses = Object.entries(window.YT.PlayerState);
      console.log(videoStatuses.find((status) => status[1] === event.data)[0]);
    }
  }

  useEffect(() => {
    setMaxDuration("06:00");
    var tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    loadVideo();
  }, []);

Iframe:

  <div id="player">
    <iframe
      title="p"
      id="player"
      width="560"
      height="315"
      src="https://www.youtube.com/embed/sGPrx9bjgC8&autoplay=1"
      frameBorder="0"
      allowFullScreen
    ></iframe>
  </div>

(edited the code to the latest workaround) How can I get this to work?

from 'YT' is not defined - Youtube Player API