Encountered two children with the same key when load controllers with <XR/> in Next.js

[liyan827]

My Project structure:Next.js13+React18+@react-three-xr:5.4.1
My usage is as follows:
<VRButton /> <Canvas gl={{preserveDrawingBuffer: true}} {...props} onCreated={(state)=>{ state.gl.setClearColor(0xebf2f7); state.gl.localClippingEnabled = true; }}> <XR> <directionalLight intensity={0.75} /> <ambientLight intensity={0.75} /> {children} <Preload all /> <Controllers /> </XR> </Canvas>
Here is the error:

What could be the reason for this? Is it because React is re-rendering?thanks for the reply