I was creating this React component and I was astonished by the fact that when I clicked on the video I got false on console immediatelly after the video started. I was expecting that it would print true when the video started, and false when it finished. I think I'm confusing the lifecycle of this particular component, and I would be really grateful if someone could clarify this to me.

const Video = ({src, type, index, isAutoPlay}) => {
  
  const [play, setPlay] = useState(isAutoPlay)

  const playRef = useRef();

  useEffect(() => {
    if (play && playRef.current) {
      playRef.current.play();
    }
    return () => setPlay(false)
  }, [play]);
  return (
    <>
      <video 
       className="slide" 
       ref={playRef} 
       onClick={() => {
                setPlay(true); 
                console.log(play);}}>
        <source src={src} type={type} key={index}/>
        Your browser does not support the video tag.
      </video>
    </>
  )
}