Huge performance issue after accessing model once AFTER render.

[rzfzr]

Update: it is not only when serializing, even logging the model itself causes the issue

On the useEffect hook I want to serialize and set to state the model, as I use it inside another component, however after the function call the diagram becomes very very slow, dragged nodes go to their place after more than 5 seconds later... I thought that the component where I use the json was rerendering or something but the issue is with the method itself, because if I disable my second component and simply log the serialization to the console, the issue is the same, if I don't serialize it everything goes smoothly. Instead of using a hook, after a button press, the result is the same This is my current code:

export default function Diagram() {
    const { setModel } = useContext(GlobalContext)
    const engine = createEngine();
    const model = new DiagramModel();
    generateNodes(model)
    engine.setModel(model);

    useEffect(() => {
        setModel(model.serialize())
    }, [])

    return (
        <div style={{ width: '100%', height: '100%' }}>
            <CanvasWidget className='canvas' engine={engine} />
        </div>
    );
}