How to use CKEditor 5 with MathTyp plugin ni Next.js

Question

I am facing an issue running CKEditor5 with MathType plugin in Next.js app. What is happening that when I open the Math Panel I can not see or do anything like in the attachment:

and here is the code I am using: please help fix this issue and what is the missing steps to do to make it working?

// @ts-nocheck
import React, { useEffect, useState } from "react";
import dynamic from 'next/dynamic'

const CKEditor = dynamic(
  () => import('@ckeditor/ckeditor5-react').then(module => module.CKEditor),
  { ssr: false }
);
// import ClassicEditor from "ckeditor5-build-classic-mathtype";
import ClassicEditor from "ckeditor5-mathtype/build/ckeditor";
// const ClassicEditor = dynamic(() => import('ckeditor5-classic-with-mathtype').then(module => module.ClassicEditor), { ssr: false })
// import ClassicEditor from 'ckeditor5-classic-with-mathtype';

export default function RichTextEditor() {
  const [ckData, setCkData] = useState("");
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    setTimeout(() => {
      setLoading(false)
    }, 3000);
  }, [])
  
  return (
    <React.Fragment>
      {!loading ? <CKEditor
        editor={ClassicEditor}
        config={{
          toolbar: {
            shouldNotGroupWhenFull: true,
            items: [
              "heading",
              "fontsize",
              "alignment",
              "fontColor",
              "fontBackgroundColor",
              "outdent",
              "indent",
              "|",
              "bold",
              "italic",
              "link",
              "bulletedList",
              "numberedList",
              "imageUpload",
              "mediaEmbed",
              "insertTable",
              "blockQuote",
              "undo",
              "redo",
              "|",
              "MathType",
              "ChemType"
            ]
          }
        }}
        data={ckData}
        onReady={(editor) => {
          // You can store the "editor" and use when it is needed.
          // console.log( 'Editor is ready to use!', editor );
        }}
        onChange={(event, editor) => {
          const data = editor.getData();
          // console.log({ event, editor, data });
          setCkData(data);
        }}
      />: 'loading text editor...'}
      <div>{ckData}</div>
    </React.Fragment>
  );
}