Multiple scenes in VR mode and different cameras - three.js

Question

I'm trying to implement this fiddle in an XR environment.
In the fiddle, the second scene is fixed to the screen, but not with the oculus/player camera...
Does anyone have a solution to making a scene or an object always on the top right corner of an oculus? I suppose there is a mistake with the size and camera but cannot find what...
I'm not sure, I broke my brain, it's my first step in XR...
Portal Second Scene Code :
function Viewcube() {
const { gl, scene, camera, size } = useThree()
const virtualScene = useMemo(() => new Scene(), [])
const virtualCam = useRef()
const ref = useRef()
const [hover, set] = useState(null)
const matrix = new Matrix4()
useFrame(() => {
matrix.copy(camera.matrix).invert()
ref.current.quaternion.setFromRotationMatrix(matrix)
gl.autoClear = true
gl.render(scene, camera)
gl.autoClear = false
gl.clearDepth()
gl.render(virtualScene, virtualCam.current)
}, 1)
return createPortal(
<>
<OrthographicCamera ref={virtualCam} makeDefault={false} position={[0, 0, 100]} />
<mesh
ref={ref}
raycast={useCamera(virtualCam)}
position={[size.width / 2 - 80, size.height / 2 - 80, 0]}
onPointerOut={(e) => set(null)}
onPointerMove={(e) => set(Math.floor(e.faceIndex / 2))}>
{[...Array(6)].map((_, index) => (
<meshLambertMaterial attachArray="material" key={index} color={hover === index ? 'hotpink' : 'white'} />
))}
<boxGeometry args={[60, 60, 60]} />
</mesh>
<ambientLight intensity={0.5} />
<pointLight position={[10, 10, 10]} intensity={0.5} />
</>,
virtualScene
)
}
To summarize, I would like to display something fixed in the top-right corner of the oculus view, even when moving head, but I am stuck...