How to add Custom modal instead of default asset manager in grapejs

, I am integrating grapesjs builder with my nextjs website , i already have asset manager built previously. What I want is to pop up my modal instead of default modal of grapejs.

My code for grapesjs editor :-

import { useEffect, useState } from 'react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import grapesjs from 'grapesjs';
import 'grapesjs-preset-newsletter';

import 'grapesjs/dist/css/grapes.min.css';
import { Button } from '@mui/material';
import { addTagToLink } from './addTagToLink';

import FileLibrary from '../fileLibrary/FileLibrary';
import FileLibraryWrapper from '../fileLibrary/FileLibraryWrapper';
export default function GrapesjsEditor() {
  const [state, setState] = useState({ showLibrary: false, props: null });
  console.log(state.props);
  useEffect(() => {
    const editor = grapesjs.init({
      container: '#gjs',
      height: '100vh',
      plugins: ['gjs-preset-newsletter'],
      assetManager: {
        custom: {
          open(props) {
            setState({ ...state, showLibrary: true, props });
          },
          close(props) {},
        },
      },

      storageManager: false,
    });

    editor.Panels.addButton('options', {
      id: 'options',
      attributes: { title: 'Save' },
      label: 'Save',
      command(editor2) {
        let html = editor2.runCommand('gjs-get-inlined-html');
        html = addTagToLink(html);
        // eslint-disable-next-line no-console
        console.log(html);
        alert('Saving to database');
      },
    });
    // editor.Commands.add('open-assets', {
    //   run(editor, sender, opts) {
    //     const assettarget = opts.target;
    //     // code to open your own modal goes here.
    //     <FileLibrary
    //       open={true}
    //       onClose={() => null}
    //       files={[]}
    //       title="File Library"
    //       onUpload={() => null}
    //       onUploadNewFile={() => null}
    //       onDelete={() => null}
    //       acceptedFileType={() => null}
    //     />;
    //   },
    // });
    // const assetManager = editor.AssetManager;
    // if (assetManager.isOpen()) {
    //   setIsOpen(true);
    // }
  }, []);

  return (
    <div>
      {state.showLibrary && (
        <FileLibrary
          open={state.showLibrary}
          onClose={() => {
            state.props.close();
            setState({ ...state, showLibrary: false });
          }}
          files={[]}
          title="File Library"
          onUpload={() => null}
          onUploadNewFile={() => =null}
          onDelete={() => null}
          acceptedFileType={() => null}
        />
      )}
      <div id="gjs" />
    </div>
  );
}

File Library is my custom modal ,

also i am calling props.close correctly?

 <FileLibrary
          open={state.showLibrary}
          onClose={() => {
            state.props.close();
            setState({ ...state, showLibrary: false });
          }}
          files={[]}
          title="File Library"
          onUpload={() => null}
          onUploadNewFile={() => null}
          onDelete={() => null}
          acceptedFileType={() => null}
        />

as in docs https://grapesjs.com/docs/modules/Assets.html#customization

With this code i was able to open my custom modal instead of default,

my main question is what function should i pass in onUpload so that it will reflect on builder

OR If i am doing whole wrong , can you pass give me basic idea how to implement custom modal , for ES6 specially.