Cannot read property 'getX' of undefined, js engine

Questions
,
1

I’m using threeJS in a react-native app.

I have two .glb files, where first one is:

import { useGLTF } from '@react-three/drei/native';

export function HatA({ skeleton }) {
  const { nodes, materials } = useGLTF(require('../Hat_02.glb'));
  const clonedGeometry = nodes.hat2.geometry.clone();

  return (
    <skinnedMesh
      name="HatA"
      geometry={clonedGeometry}
      material={materials['Material.001']}
      skeleton={skeleton} // Use the skeleton passed as a prop
      position={[10, 30, -170]}
      scale={17}
      rotation={[-Math.PI / 2, 0, 0]}
    />
  );
}

The idea is that at the press of a button, I need to replace a hat with the HatA above. So I have a TestModel which is:

export function TestModel({ hat }) {
  const group = useRef(null);
  const { nodes, materials, animations } = useGLTF(
    require('../glb-models/BaseBody_01.glb'),
  );

  return (
    <group ref={group} dispose={null}>
      <Center>
        <group name="Scene" scale={0.03}>
          <group
            name="Armature"
            rotation={[Math.PI / 2, 0, 0]}
            position={[60, 0, 0]}>
            <group name="Low_Poly_Male_bodyGroup2">
              <skinnedMesh
                name="Mesh"
                geometry={nodes.Mesh.geometry}
                material={materials.lambert1}
                skeleton={nodes.Mesh.skeleton}
              />

              <skinnedMesh
                name="Mesh_1"
                geometry={nodes.Mesh_1.geometry}
                material={materials['Hat02_LoPoly:initialShadingGroup']}
                skeleton={nodes.Mesh_1.skeleton}
                visible={hat !== 'HatA'} // Hide Mesh_1 when HatA is active
              />

              {hat === 'HatA' && <HatA skeleton={nodes.Mesh_1.skeleton} />}
            </group>
            <primitive object={nodes.Low_Poly_Male_bodyHips} />
          </group>
        </group>
      </Center>
    </group>
  );
}

I have Mesh_1 which is the default Hat, and then HatA is the hat I want to replace. Hence when I pass hat to this Model it works fine but changing to HatA gives me

TypeError: Cannot read property ‘getX’ of undefined, js engine: hermes

I’m new to three.js and not sure what is causing that. I think it can be because I have a condition for HatA and when Mesh_1 is hidden it also impacts the skeleton that I pass. So, any idea how can I fix this?

When using it I have a <Canvas> in which I call <TestModel hat={hat} /> where hat is HatA or null.