It seems like a mis-match to me to try to use React for 3D. Like if all you have is a hammer than everything is a nail. 3D is not a tree, only the scene graph is, geometry and materials are not leaf nodes.
Think about HTML and Images. Image tags `<img>` live inside the DOM tree but the image itself, the actual pixels, are referenced only by name and those resources are managed outside of React. From React's POV doesn't know about the actual images. It only knows about these HTML tags called `<img>` that are references to the actual image. Two or more img tags can reference the same image by using the same src and something outside of react loads, frees, and otherwise deals with them.
In 3D you have the same problem a geometry, or mesh-data, like a cube or human, might be referenced 2 or more times. If you want to cover a globe with cubes you might have 1000 cubes. But, like an image, all you want is references to a single cube and that single cube, following React's example with HTML, would live outside of React. It can't be part of the DOM hierarchy because it doesn't fit the definition of "hierarchy". Its references do but its data does not.
The same with materials. In React, if you want 2 elements to share a style you use className="nameOfStyle" and the actual style lives outside of React in CSS. You have the same issue with materials in 3D. You might want 247 of your 1k cubes above all to share the same material as they represent the same area so that you can highlight them collectively, but now you're creating something that doesn't live in a tree, just like in className="nameOfStyle", nameOfStyle doesn't live in the tree.
I'm not saying they're aren't solution, just that off the top of my head, declaring <Scene><Cube/><Cube/><Cube/></Scene> is wrong. It should be <Scene><Renderable geo="cube"><Renderable geo="cube"><Renderable geo="cube"></Scene> and now you're left figuring out how to declare what the string "cube" represents but it will look nothing like React JSX. I get that react-three-fiber does the former but it's arguably wrong as it's pretending something is a hierarchy that's not a hierarchy. See the image example above.
I've worked with react-three-fiber a little bit so maybe I can offer some experience. RTF is not awesome because React is the best, or even a particularly good way to describe 3D objects. It's awesome because if you are already building a React app you can integrate 3D objects into your app and build user interactions using the same model as the rest of your application. The idea is to be able to bring in 3D models and add things like onHover events and animations as if they are DOM nodes like the rest of your application is. It has worked really well for me, there is a tool that turns Blender models into JSX so you never have to worry about that.
declaring the graph in combination with hooks is how you form self-reliant components.
as for leaf nodes, if they pre-exist they are declared as props, but you can also declare them. they are part of the graph. the only difference is that they don't go into "children".
Think about HTML and Images. Image tags `<img>` live inside the DOM tree but the image itself, the actual pixels, are referenced only by name and those resources are managed outside of React. From React's POV doesn't know about the actual images. It only knows about these HTML tags called `<img>` that are references to the actual image. Two or more img tags can reference the same image by using the same src and something outside of react loads, frees, and otherwise deals with them.
In 3D you have the same problem a geometry, or mesh-data, like a cube or human, might be referenced 2 or more times. If you want to cover a globe with cubes you might have 1000 cubes. But, like an image, all you want is references to a single cube and that single cube, following React's example with HTML, would live outside of React. It can't be part of the DOM hierarchy because it doesn't fit the definition of "hierarchy". Its references do but its data does not.
The same with materials. In React, if you want 2 elements to share a style you use className="nameOfStyle" and the actual style lives outside of React in CSS. You have the same issue with materials in 3D. You might want 247 of your 1k cubes above all to share the same material as they represent the same area so that you can highlight them collectively, but now you're creating something that doesn't live in a tree, just like in className="nameOfStyle", nameOfStyle doesn't live in the tree.
I'm not saying they're aren't solution, just that off the top of my head, declaring <Scene><Cube/><Cube/><Cube/></Scene> is wrong. It should be <Scene><Renderable geo="cube"><Renderable geo="cube"><Renderable geo="cube"></Scene> and now you're left figuring out how to declare what the string "cube" represents but it will look nothing like React JSX. I get that react-three-fiber does the former but it's arguably wrong as it's pretending something is a hierarchy that's not a hierarchy. See the image example above.