[Help] How to position <group /> relative to hand space but rotated relative to world?

[jm-bh]

I have a <group /> that needs to be "anchored" to the hand's position, but be absolutely rotated in the world, kind of like a compass. The red needle must always point "north," regardless of the hand's rotation.

My current solution is to combine setState with useFrame:

const CompassOrienter = ({children}: {children: ReactNode}) => {
  const handState = useXRInputSourceState("hand", "left");
  const xrSpaceRef = useRef<Object3D>(null);

  const [handRotation, setHandRotation] = useState(new Quaternion());

  useFrame(() => {
    if (!xrSpaceRef.current) {
      return;
    }
    
    const q = new Quaternion();
    xrSpaceRef.current.getWorldQuaternion(q);
    setHandRotation(q);
  })

  const handSpace = handState?.inputSource.hand.get("middle-finger-metacarpal");

  return !handSpace ? null : (
    <XRSpace ref={ref} space={handSpace}>
      <group quaternion={handRotation.invert()}>
        {children}
      </group>
    </XRSpace>
  )
}

However, the docs explicitly warn against this because it causes a re-render. Is there another way to go about this?