How to clear video state when reusing the same video element with videojs-contrib-eme?

Question

I am using video.js for creating my custom video player in a react application. Currently I'm able to play normal videos, DRM protected videos (using videojs-contrib-eme) and 360 degree videos (using three.js) maintaining the same instance of the player and same video element reference and only switching the video source.

useEffect(() => {
    logger('try to boot player');

    if (!videoRef.current) return;
    if (playerRef.current) return;

    playerRef.current = videojs(videoRef.current, options);

    const player = playerRef.current;

    player.ready(() => {
      logger('load player plugins');
      player.seriesPlugin();
      player.subtitlesPlugin();
      player.errorPlugin();
      player.eme();
    });

    logger('player booted');
  }, [videoRef]);

    // then in a separate useEffect for normal videos
    player.src(source.url);
    player.load();

    // but before setting the src for 360 videos, I'm enabling my custom plugin for 360
    if (mediaPlayerData.videoType ==='360') {
      player.vrPlugin();
    } else {
      if (videojs.getPlugins().vrPlugin) {
        player.vrPlugin().dispose();
      }
    }
    
    // for drm also add the keySystems to the src
    player.src({
        src: source.url,
        keySystems: {/* the actual key systems */},
      });
    player.load();

I'm encountering an issue after a prior playback of a DRM video, which sets and keeps some state on the video element as I observed. This retained state affects the 360 player, resulting in a black screen display.

    // Before enabling the vrPlugin I want to clear somehow the state on the video element or something because it prevents three.js to render the video texture
    // In my vrPlugin i'm doing something like this:
    this._initializeCamera();
    this._initializeScene();
    this._initializeVideoTexture(); // get the video element and create a THREE.VideoTexture
    this._initializeMovieScreen(); // create a THREE.Mesh and add it to the scene
    this._initializeRenderer(); // create a THREE.WebGLRenderer
    this._initializeRenderedCanvas(); // add renderer.domElement to DOM
    this._initializeControls();

I discovered that setting the video element's media keys to null resolves the issue with the 360 player, but it adversely affects subsequent DRM video playback (it's not loading anymore).

I'm seeking guidance on how to reset the video element's state after changing the src without causing any unintended side-effects. Is there a way to achieve this?