How do I put a live React component inside a mxgraph (drawio) box?

Question

How do I properly put a live React component inside of mxgraph (drawio) shape?

So far, I have managed to put a pre-rendered react component (see the picture above). This works fine, but events and hooks are not firing. Also, the update is not that fast because the whole HTML needs to be rebuilt on each update (consider progress changed in just one box - you need to rebuild everything). It looks now somewhat like this:

/// this wokrs

const ReactComp = () => (
  <div .../>
);

const Main = () => {

  const containerRef = useRef();
  const graphRef = useRef();

  useEffect(() => {
    graphRef.current = new mxgraph.Editor(...)
    const html = renderToString(<ReactComp />);
    graphRef.current.insertVertex(null, cellId, html, x, y, w, h, style);
    ...
    return () => {
      graphRef.current.destroy();
    }
  });

  return <div ref={containerRef} />
}

But I would like to avoid pre-rendering and put a live component there, i.e. a normal react component with events and hooks. I have tried to use portals, but somehow did not quite work. The react content shows up for a moment and then gets overwritten by something from within mxgraph. Also, with pre-rendering, you have to handle mouse clicks manually and if the content gets complex enough, you get hooks inside (that obviously don't work when pre-rendered).

I would appreciate basic thougts, how to integrate mxgraph with react. Maybe mxgraph has a rendering hook that can be used for that or something.

// this does not work

const ReactComp = () => (
  <div .../>
);

const Main = () => {

  const containerRef = useRef();
  const graphRef = useRef();

  const [portal, setPortal] = useState();

  useEffect(() => {
    graphRef.current = new mxgraph.Editor(...)
    const html = `<div id="uniqueId" />`
    graphRef.current.insertVertex(null, cellId, html, x, y, w, h, style);
    ...
    setPortal(createPortal(<ReactComp />, document.getElementByID("uniqueId")));
    return () => {
      graphRef.current.destroy();
    }
  });

  return (
    <div ref={containerRef} >
    {portal}
    </div>
   )
}

Any thoughts?