video_id for 'pause' event when changing videoId prop is the new one, instead of the previous one

[JorgeSivil]

Steps to Reproduce:

Have 1 YouTube component, pass the VideoID.

Have a function that OnClick changes the VideoID to another.

You can see that the "pause" event gets fired for the new video ID instead of the previous video ID.

function getPlayer(playerStatus) {
  return (
    <YouTube
      videoId={playerStatus.video.id}
      opts={{
        playerVars: {
          autoplay: 1,
        },
      }}
      onStateChange={(event) => {
        trackPlayerEvent(event.data, event.target.playerInfo.videoData.video_id);
      }}
    />
  );
}

function trackPlayerEvent(eventId, videoId) {
  switch (eventId) {
    // Unstarted
    case -1:
      console.log('YouTube Video Clicked', videoId);
      // trackEvent({
      //   action: 'YouTube Video Clicked',
      //   label: videoId,
      // });
      break;

    // Ended
    case 0:
      console.log('YouTube Video Ended', videoId);
      // trackEvent({
      //   action: 'YouTube Video Ended',
      //   label: videoId,
      // });
      break;

    // Playing
    case 1:
      console.log('YouTube Video Played', videoId);
      // trackEvent({
      //   action: 'YouTube Video Played',
      //   label: videoId,
      // });
      break;

    // Paused
    case 2:
      console.log('YouTube Video Paused', videoId);
      // trackEvent({
      //   action: 'YouTube Video Paused',
      //   label: videoId,
      // });
      break;

    // Buffering
    case 3:
      console.log('YouTube Video Buffered', videoId);
      // trackEvent({
      //   action: 'YouTube Video Buffered',
      //   label: videoId,
      // });
      break;

    case 5:
      // Video Cued
      break;
  }
}

[ruisaraiva19]

@JorgeSivil This behavior is from the YouTube Player API itself on not something manipulated by the react-youtube component code.