如何使用React + Typescript嵌入YouTube iframe？

import React from 'react';

type YouTubeProps = {
  videoId: string;
};

const YouTube: React.FC<YouTubeProps> = ({ videoId }) => {
  const [player, setPlayer] = React.useState<YT.Player | null>(null);

  React.useEffect(() => {
    const onYouTubeIframeAPIReady = () => {
      setPlayer(
        new YT.Player('youtube-player', {
          videoId: videoId,
          events: {
            onReady: onPlayerReady,
          },
        })
      );
    };

    if (!window.YT) {
      const tag = document.createElement('script');
      tag.src = 'https://www.youtube.com/iframe_api';
      const firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
    } else {
      onYouTubeIframeAPIReady();
    }

    return () => {
      if (player) {
        player.destroy();
      }
    };
  }, [videoId]);

  const onPlayerReady = (event: YT.PlayerEvent) => {
    event.target.playVideo();
  };

  return <div id="youtube-player" />;
};

const App: React.FC = () => {
  return (
    <div>
      <YouTube videoId="YOUR_VIDEO_ID" />
    </div>
  );
};