Loading mxgraph in react useEffect method problem - reactjs

Question

I try to show a mxgraph object after I upload a file to a server. The server runs ANTLR and returns the parsed data as JSON Object. I use Typescript to generate an Object out of my JSON result. This Object is set to a variable with react useState.
Now my problem:
after I set the diagram variable with useState, the useEffect is fired up. In the useEffect my goal is to show the mxgraph. The Graph is shown, but it creates a new component every time the useEffect is Called and the graph appears in a new div
My question is, is there a way crating the graph in the useEffect method and only showing it in the intended div?
Component Header
const [diagram, setDiagram] = useState<IDiagram>();
const divGraph = React.useRef<HTMLDivElement>(null);
The api call
const onSubmit = async (e: any) => {
e.preventDefault();
const formData = new FormData();
formData.append("file", file);
try {
const res = await axios.post("/upload", formData, {
headers: {
"Content-Type": "multipart/form-data",
},
});
//create a TypeScript Object out of result
var diag = diagramCreator.createDiagram(res.data);
//sets the diagram variable with useState
setDiagram(diag);
} catch (err) {
console.log(err);
}
};
The useEffect
useEffect(() => {
if (!mxClient.isBrowserSupported()) {
mxUtils.error("Browser is not supported!", 200, false);
}
else {
const graph = new mxGraph(divGraph.current);
graph.setConnectable(true);
graph.setHtmlLabels(true);
mxEvent.disableContextMenu(divGraph.current);
if(typeof diagram !== 'undefined' ){
var mxGraphCreator = new MxGraphCreator(graph,diagram);
graph.getModel().beginUpdate();
mxGraphCreator.start();
graph.getModel().endUpdate();
}
}
});
the 'HTML' part
return(
<Fragment>
...
<div
className="graph-container"
ref={divGraph}
id="divGraph">
</div>
</Fragment>
);
here you see the actual result:
my goal is to show the orange diagram in the top
turquoise area
If you need more information please ask. Thanks