Nextjs ref is always null

[mwaqarkt]

Hi,

I am using dynamic load for the flipbook component.
I tried different ways to get ref working but it is always null.
Need help.

I am using it as client rendering so used this command as well
'use client';
Three different ways to import are given below

`const HTMLFlipBook = dynamic(() => import('react-pageflip'), {
ssr: false,
loading: () => {
setIsFlipPageLoaded(false);
return

....Loading...

;
},
loaded: () => {
console.log("Loaded");
setIsFlipPageLoaded(true);
},
forwardRef: true
});

const ForwardedRefHTMLFlipBook = React.forwardRef((props, ref) => (
<HTMLFlipBook {...props} forwardedRef={ref} />
))

const HTMLFlipBook = Loadable({
loader: () => import('react-pageflip'),
loading: LoadingComponent,
});`