使用React，如何在播放和暂停视频时保持状态？

import React, { useState } from 'react';

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

  // 其他组件代码...

  return (
    <div>
      {/* 视频播放器组件 */}
    </div>
  );
}

export default VideoPlayer;

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

  const handlePlay = () => {
    setIsPlaying(true);
  };

  const handlePause = () => {
    setIsPlaying(false);
  };

  return (
    <div>
      <video
        src="video.mp4"
        onPlay={handlePlay}
        onPause={handlePause}
      />
    </div>
  );
}

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

  const handlePlay = () => {
    setIsPlaying(true);
  };

  const handlePause = () => {
    setIsPlaying(false);
  };

  return (
    <div>
      <video
        src="video.mp4"
        onPlay={handlePlay}
        onPause={handlePause}
      />

      {isPlaying ? (
        <button onClick={handlePause}>暂停</button>
      ) : (
        <button onClick={handlePlay}>播放</button>
      )}
    </div>
  );
}