How to pass mesh components with states like in react?

[kayden1940]

I am trying to pass mesh compoents with useState and while the react components passed normally, I have noticed they are disappear from scene.children and the refs atteched to those meshes are gone too, causing those mesh components to disappear on screen.
Ultimately I am trying to achieve group transform, scale, rotation and ungrouping like in three.js/editor

Below are testing demo and the corresponding repo:
https://r3f-grouping-test.web.app/
https://github.com/kayden1940/r3f-group-test/tree/master

[CodyJasonBennett]

You'll need to map these boxes with designated keys so react knows how to virtualize them.

const boxRef = createRef()
const boxLength = boxRefs.current.push(boxRef)
const boxKey = boxLength - 1
setBoxes((prev) => [...prev, <Box ref={boxRef} key={boxKey} />])