Using React component in decorations

Is there a known solution for using a React component in a widget decoration?

I initially thought that I could perhaps use a Portal, where it queried the CodeMirror editor after render and then replaced an empty widget with my component, like:

const Code = () => {
  const cmRef = React.useRef<ReactCodeMirrorRef>({});

  return (
    <>
      <CodeMirror ref={cmRef} />

      <WidgetPortal {...{ cmRef }}>
        <Widget />
      </WidgetPortal>
    </>
  );
};

const WidgetPortal = ({
  children,
  cmRef,
}: {
  children: React.ReactNode;
  cmRef: React.MutableRefObject<ReactCodeMirrorRef>;
}) => {
  const targetEl = cmRef.current?.editor?.querySelector(".widget");
  return targetEl ? ReactDOM.createPortal(children, targetEl) : null;
};

But this doesn't seem to work - no errors are thrown and the empty widget container is still in the DOM so I assume the CodeMirror component is rendering in a way that is preventing my portal from mounting.

Is there any other way you think this could be achieved?

Start with the widget decoration reference and the React Portal example linked in the issue, then inspect the CodeMirror editor ref used by the React component. Determine whether React content can be mounted into a decoration widget without leaving the empty container, and document or demonstrate a working approach when the behavior is resolved.