I'm trying to implement automatic picture in picture functionality in my React video player using the media session API's enterpictureinpicture action handler, following the guidance here.

However, the action handler I've registered doesn't seem to work:

useEffect(() => {
  const requestPermissions = async () => {
    try {
      const mediaStream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true,
      });

      if (videoRef) {
        videoRef.current.srcObject = mediaStream;
      }

      navigator.mediaSession.setActionHandler("enterpictureinpicture", () => {
        videoRef.current.requestPictureInPicture();
      });
    } catch (err) {
      console.error(err);
    }
  };

  requestPermissions();
}, []);

My chrome version is 143.0.7499.169 and according to the doc, it should support this feature. I don't see any errors in the console either. How can I debug this?