can you portal elements into a Canvas in react-three-fibre? - reactjs

Question

Is it possible to portal some react-three-fibre elements into a canvas from outside of one?
I.e. in the following example, which was my first attempt to portal a mesh into a Canvas which errored with "target element is not a DOM element" (which makes sense, given these aren't DOM elements)
import * as React from 'react'
import { Canvas, createPortal } from '#react-three/fiber'
export const Element = ({ parent }) => {
return createPortal(
<mesh>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="red" />
</mesh>
, parent);
};
export const MyPage = () => {
const ref = React.useRef(null);
return (
<div>
<Canvas>
<group ref={ref} />
</Canvas>
<Element parent={ref.current} />
</div>
);
};
So I found the createPortal method (which has incredibly limited documentation) from react-three-fiber, but with that it throws errors, presumably here because the createPortal method only works when already inside a Canvas context and is for portaling around inside a Canvas
import * as ReactDOM from 'react-dom'
import * as React from 'react'
import { Canvas } from '#react-three/fiber'
export const Element = ({ parent }) => {
return ReactDOM.createPortal(
<mesh>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="red" />
</mesh>
, parent);
};
export const MyPage = () => {
const ref = React.useRef(null);
return (
<div>
<Canvas>
<group ref={ref} />
</Canvas>
<Element parent={ref.current} />
</div>
);
};
the above throws this error:
react-dom.development.js:22839 Uncaught R3F hooks can only be used within the Canvas component!
Is there a way of doing this?
My hope is to be able to portal elements from elsewhere in the project into a single document-sized Canvas element that sits at the root.
update:
I have managed to get this to work by wrapping the call to createPortal in a second <Canvas />
export const Element = ({ parent }) => {
return (
<Canvas>
{createPortal(
<mesh>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="blue" />
</mesh>,
portalTo
)}
</Canvas>
);
};
</code>
however this is unworkable as three.js lmits the number of canvases in a project (and having unused actual canvases everywhere in the DOM is really gross anyway)
is there a way of giving createPortal access to that context without needing to render it inside a Canvas?