React-three-fiber: Canvas child is placed outside the DOM tree making it difficult to use React context

[ghost]

If I wrap the ... section of my code in some React context provider, the elements in Canvas do not have access to the context as I'd have expected. I checked the virtual DOM on dev tools, and turns out the children of Canvas is just placed outside of the tree. Is that normal? If yes, how do I make my context available inside Canvas?

[drcmda]

this is a problem with react itself, all reconcilers suffer from it, here's a similar issue for react-konva: https://github.com/konvajs/react-konva/issues/188 . you can either just reflect the context inside the canvas, which will work: https://github.com/konvajs/react-konva/issues/188#issuecomment-478302062 or use a state manager that isn't reliant on context: https://github.com/react-spring/zustand

[franciscop-sc]

You could write a bridge to pass the context:

Context Bridge example