ref methods not working when using dynamic import with nextjs

Current code=>

import dynamic from "next/dynamic";
const ReactPlayer = dynamic(() => import("react-player/lazy"), { ssr: false });

          <ReactPlayer
              config={config}
              ref={player}
              width="100%"
              height="600px"
              url="//vjs.zencdn.net/v/oceans.mp4"
              muted={true}
              playing={playing}
              controls={true}
              onProgress={}
             />

Current Behavior

Ref methods like player.current.getCurrentTime(); are not working when using dynamic imports with nextjs. Whenever I use methods which are available by assigning ref, I get this error TypeError: player.current.getCurrentTime is not a function

Expected Behavior

expecting ref methods to work.

Steps to Reproduce

1. Nextjs app with next@12.1.6, react@18.1.0 , react-dom@18.1.0 and react-player@2.10.0 . I’ve already tested with react-player@2.10.1. Not working in that version as well.

Environment

• Browser: Chrome

[inderrr]

The only solution so far is to wrap the player in another component and import that component. Then we can use dynamic imports and the ref methods work as expected.

// components/VideoPlayer.js
import ReactPlayer from "react-player/lazy";

function VideoPlayer({ playerRef }) {
  return (
    <ReactPlayer
        ref={playerRef}
        muted
        playing
        controls        
      />
  );
}

// pages/index.js
import dynamic from "next/dynamic";
const VideoPlayer = dynamic(() => import("../components/VideoPlayer"), {ssr: false});

function Home(){
 const playerRef=useRef();
 
 return <VideoPlayer playerRef={playerRef} />

}

[LuLue7775]

Same issue here. I’m using useRef to access ReactPlayer, and somehow it’s returing retry() instead of any other instance methods.