動画再生 React

const MyApp = () => {

  const [isPlaying, setIsPlaying] = useState(false);

  const movieRef = useRef();

  const handleMovie = () => {

    if (isPlaying) {
      movieRef.current.pause();
    } else {
      movieRef.current.play();
    }
    setIsPlaying(prev => !prev);
  }

  return (
    <>
      <video ref={movieRef} style={{ maxWidth: "50%" }}>
        <source src="./skate.mp4"></source>
      </video>
      <Button variant='contained' onClick={handleMovie}>{isPlaying ? "stop" : "play"}</Button>
    </>
  )
}

export default MyApp