Play on hover

[illiachumak]

Hi, how to make video play on hover?
currently its not working, only on click

const VideoPlayer: React.FC<VideoPlayerProps> = ({ sourceItem }) => {
  const videoMedia = sourceItem.media[0] as Video;

  const playerRef = useRef<any>(null);

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

  const [isHover, setIsHover] = useState(false);

  const playerSource: SourceInfo = {
    type: "video" as const,
    title: sourceItem.title || "",
    sources: videoMedia.version_list.map((v: VideoVersion) => ({
      src: v.url,
      type: v.url.endsWith(".webm") ? "video/webm" : "video/mp4",
      size: v.height,
    })),
    poster: "",
    previewThumbnails: undefined,
    tracks: [],
  };

  const plyrOptions: Options = {
    controls: [],
    clickToPlay: true,
    autopause: true,
  };

  useEffect(() => {
    const plyrInstance = playerRef.current?.plyr;
    if (!plyrInstance) return;

    if (isHover) {
      plyrInstance.play();
      setIsPlaying(true);
    } else {
      plyrInstance.pause();
      setIsPlaying(false);
    }
  }, [isHover]);

  const handleVideoClick = () => {
    const plyrInstance = playerRef.current?.plyr;
    if (!plyrInstance) return;

    if (isPlaying) {
      plyrInstance.pause();
      setIsPlaying(false);
    } else {
      plyrInstance.play();
      setIsPlaying(true);
    }
  };

  const containerStyle: React.CSSProperties = {
    position: "relative",
    width: "100%",
    height: "auto",
    borderRadius: "8px",
    overflow: "hidden",
    cursor: "pointer",
  };

  return (
    <div
      style={containerStyle}
      // onMouseEnter={() => setIsHover(true)}
      // onMouseLeave={() => setIsHover(false)}
      onClick={handleVideoClick}
    >
      <Plyr ref={playerRef} source={playerSource} options={plyrOptions} />
    </div>
  );
};

export default VideoPlayer;