mesh controlled by useBox doesn't respect its parent group tag properties

[SinaBYR]

I'm trying to position a box with physics provided by useBox hook. As you can see in the code below, I'm creating two meshes one for the box itself and the other for physics using useBox. The problem I'm facing is that when I group them together, and set a new position to the parent group tag, box mesh is getting positioned respected to its parent, but the mesh controlled by useBox hook for physics is left out and doesn't consider its parent's position.

BoxWithPhysics.jsx

function BoxWithPhysics(props) {
  const [ref] = useBox(() => ({}))

  return (
    <group position={props.position}>
      <mesh>
        <boxGeometry args={[1,1,1]} />
        <meshLambertMaterial color="red" />
      </mesh>
      <mesh ref={ref as CannonRef} />
    </group>
  )
}

App.jsx

function App() {
  return (
    <BoxWithPhysics position={[2,2,2]}/>
  )
}

I can work around this by explicitly passing a position offset to useBox hook, but it doesn't work for other properties like rotation. Thanks in advance for any help!