CSS3DRenderer and CSS3DSprite in React

I am using threejs in react without any extra library. I want to know is it possible to pass react components to CSS3DSprite instead of a dom element.

To clarify this is how I am doing it right now:

    const element = document.createElement("div");
    element.style.width = "50px";
    element.style.height = "50px";
    element.style.opacity = 0.5;
    element.style.background = new Color(Math.random() * 0xffffff).getStyle();
    const object = new CSS3DSprite(element);

Is it possible to pass react component in CSS3DSprite constructor. I am creating a 360 panorama experience with hotspots if this is somehow possible than I can create a hotspot component and then just pass the hotspot position in props when adding it to CSS3DSprite constructor.

Sorry if my explanation is not clear.

if you use react declaratively it’s natural: https://twitter.com/0xca0a/status/1398633764931178498 this contains interactive tailwind components for instance.

a 360 panorama with antd components: Sky dome with annotations - CodeSandbox

and this is how you occlude html behind geometry: HTML Markers - CodeSandbox

if you need to use threejs imperatively, the effort to make this work would be considerable. css3d is an imperative dom, the very thing react-dom is made to avoid. you can of course simply portal or render into css3d nodes, but to make this reactive is going to cost you.