React版本：17.0.1

重现步骤

1.Yarn安装器
1.Yarn测试：观察
链接到代码示例：https://github.com/joshuaellis/react-three-testing-library的最大值
看一下root-issue分支，它更简洁，更容易解释问题。

当前行为

我目前正在为react-three-fiber开发一个测试库。我必须将传递的场景 Package 在r3f的Canvas组件中，这样它就可以访问r3f中的钩子。当我创建渲染示例并调用toJSON()时，我得到的响应是：

{
  type: 'div',
  props: {
    style: {
      position: 'relative',
      width: '100%',
      height: '100%',
      overflow: 'hidden'
    }
  },
  children: [ { type: 'canvas', props: [Object], children: null } ]
}

我想这是意料之中的，因为r3f组件呈现在不同的根（？）上。当我调用toTree()时，我可以开始深入到r3f组件。请考虑以下场景：

renderScene(
  <mesh position={position}  onPointerDown={() => console.log('hello')}>
    <boxBufferGeometry args={[1, 1, 1]} />
    <meshBasicMaterial />
    <mesh>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshBasicMaterial userData={{
        testId: 'material'
      }} />
    </mesh>
  </mesh>
)

这将在中按预期呈现，并钻取以查找第一个mesh，我得到了响应：

{
  '$$typeof': Symbol(react.element),
  type: 'mesh',
  key: null,
  ref: null,
  props: {
    position: Vector3 { x: 1, y: 1, z: 1 },
    onPointerDown: [Function: onPointerDown],
    children: [ [Object], [Object], [Object] ]
  },
  _owner: null,
  _store: {}
}

但是，将上面的场景 Package 在一个组件中，如下所示：

const TestComponent = () => {
    const geomRef = React.useRef<THREE.BoxBufferGeometry>(null!)
    const handlePointerDown = () => {
      geomRef.current.scale(10, 10, 10)
    }
    return (
      <mesh onPointerDown={handlePointerDown} userData={{ testId: 'mesh' }}>
        <boxBufferGeometry ref={geomRef} args={[1, 1, 1]} />
        <meshBasicMaterial />
      </mesh>
    )
  }

  it("should render my component of r3f compoennts", () => {
    const { scene } = renderScene(
      <TestComponent />
    )

    expect(scene).toBeTruthy()
  })

然后钻到我得到回应之前的同一点：

{
  '$$typeof': Symbol(react.element),
  type: [Function: TestComponent],
  key: null,
  ref: null,
  props: {},
  _owner: null,
  _store: {}
}

我无法进一步深入查找TestComponent中的mesh组件

预期行为

我不确定预期的行为应该是什么。但我的想法是，如果第一个场景可以渲染，我可以正确钻取，那么TestComponent应该“渲染”正确，这样我就可以钻取到它，找到mesh。也许第一个测试根本不应该渲染，这就是bug，因为react-three-fiber渲染的是它自己的组件在一个新的根？
这可能是更容易发挥周围的回购我已经附加。