ReferenceError: self is not defined in Nextjs

[theZulqarnain]

I'm using filemanger in my Nextjs apps.it showing me ReferenceError: self is not defined. even though I disabled SSR on that page but still same error.

import React, { useEffect, useState } from 'react';
import dynamic from "next/dynamic";
import { FileManager, FileNavigator } from '@opuscapita/react-filemanager';
import connectorNodeV1 from '@opuscapita/react-filemanager-connector-node-v1';
import Layout from '../components/base/Layout';
import BannerComponent from '../components/utilities/BannerComponent';
import BreadCrumComponent from '../components/utilities/BreadCrumComponent';

const apiOptions = {
  ...connectorNodeV1.apiOptions,
  apiRoot: `http://opuscapita-filemanager-demo-master.azurewebsites.net/` // Or you local Server Node V1 installation.
}
const fileManagement = () =>{
    const [showFileManager,setShowFileManager] = useState(false);

    useEffect(() => {
        if(!showFileManager){
            setShowFileManager(true)
        }
      }, [showFileManager]);

    const breadcrumbs = ['Workspace','Transformation Scoping'];
    const fileManagerGen = () => {
        return (
            <div style={{ height: '480px' }}>
               <FileManager>
                 <FileNavigator
                   id="filemanager-1"
                   api={connectorNodeV1.api}
                   apiOptions={apiOptions}
                   capabilities={connectorNodeV1.capabilities}
                   listViewLayout={connectorNodeV1.listViewLayout}
                   viewLayoutOptions={connectorNodeV1.viewLayoutOptions}
                 />
               </FileManager>
             </div>
           );
    }
    return(
        <Layout
            title="Qatalyst | DTMP"
            description="Digital Transformation Management Platform"
            >
            <div className="flex flex-col pt-3">
                <div className="flex">
                    <BannerComponent
                        Height= "h-24"
                        Title="TRANSFORMATION CONTEXT"
                        SubHeadings={['Captures the context of the transformtion initiative manged on Qatalyst']}
                    />
                </div>
            </div>

            <div className="flex flex-row w-full py-4">
                <BreadCrumComponent
                    Breadcrumbs={breadcrumbs}
                />
            </div>
            {showFileManager && fileManagerGen()}
        </Layout>
    )
}

export default dynamic(() => Promise.resolve(fileManagement), {
    ssr: false
  })

Here the error.

Server Error
ReferenceError: self is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (442:30)
<unknown>
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (437:47)
module.exports
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (459:68)
Object.<anonymous>
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (25678:36)
__webpack_require__
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (30:30)
Object.<anonymous>
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (9485:1)
__webpack_require__
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (30:30)
Object.<anonymous>
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (10427:19)
__webpack_require__
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (30:30)
Object.<anonymous>
file:///home/zulqarnain/arqitek/DTMP/node_modules/@opuscapita/react-filemanager/lib/index.js (8319:18)

I have seen same closed issue that resolved it by loading on clientside.

[theZulqarnain]

created separate component and imported on client side