Before explain my problem if open discussion in wrong place forgive me. I am trying to use MindFusion Diagramming Library for React. I initialized DiagramView from "@mindfusion/diagramming-react" and MindFusion(it is importing like that. In Docs it is importing as 'mf') from "diabram-library" packages. When i put Diagram props to DiagramView it is giving me error:

Uncaught TypeError: Cannot read properties of undefined (reading 'getContext')
    at adH.<computed>.initialize (MindFusion.Common.js:6:53425)
    at Object.callBaseMethod (MindFusion.Common.js:6:20997)
    at adH.<computed>.initialize (MindFusion.Diagramming.js:6:413094)
    at DiagramView.initializeCanvas (controls.js:1:35951)
    at DiagramView.initialize (controls.js:1:35842)
    at DiagramView.initialize (diagramming.js:1:1056547)
    at Control.createControl (controls.js:1:16628)
    at DiagramView.create (diagramming.js:1:1117206)
    at attachControl (diagramming.react.js:47:41)
    at diagramming.react.js:103:25
i 

.

And this is my code:

import { DiagramView, DiagramViewProps } from "@mindfusion/diagramming-react";
import MindFusion from "diagram-library";

function FusionDiagram() {
  const Diagram = new MindFusion.Diagramming.Diagram();

  console.log(Diagram);

  return (
    <div>
      <DiagramView
        diagram={Diagram}
        showGrid={true}
        id={"halil-ibrahim"}
        style={{
          width: "100% !important",
          height: "100%",
        }}
      />
    </div>
  );
}

export default FusionDiagram;

 

Please someone can help me? Thank you very much for reading