callMethod() function not working as expected in React

I'm working on a project and needed to work with an existing livestream which use IBM uStream. I checked the documentation about the API and then another issue with React / NextJS here. But I can't use callMethod() as expected. I just want to create a button that start the video (and the other commands too).

To facilitate the understanding I have recreated a small simple project with these few lines :

import "./styles.css";
import { useEffect, useRef, useState } from "react";

export default function App() {
  const iframeRef = useRef(null);
  const [playerAPI, setPlayerApi] = useState(null);
  const onPlay = () => {
    if (!playerAPI) return;
    playerAPI.callMethod("play");
  };

  useEffect(() => {
    const init = async () => {
      const { current: iframe } = iframeRef;
      if (!iframe) {
        return;
      }

      const { default: PlayerAPI } = await import(
        "ibm-video-streaming-web-player-api"
      );
      setPlayerApi(PlayerAPI(iframe));
    };
    init();
  }, [iframeRef]);

  return (
    <div className="App">
      <button onClick={onPlay}>Start</button>
      <iframe
        title="myFrame"
        ref={iframeRef}
        width="100%"
        height="100%"
        src="https://ustream.tv/embed/17074538?controls=false&showtitle=false&hideLogo=true&hideViewerNumbers=true"
        scrolling="no"
        allow="autoplay"
        allowFullScreen
        frameBorder="0"
        style={{
          height: "100%",
          width: "100%"
        }}
      />
    </div>
  );
}

Codesandox : https://codesandbox.io/s/vigilant-carlos-hly3ji?file=/src/App.js:0-1118

Everything works good except the moment when we are supposed to call playerAPI.callMethod("play"). Nothing is happening at this moment.

Thank you for your help

IBM / video-streaming-web-player-api

callMethod() function not working as expected in React #15