Pivot controls displacing model

Questions
,
1

Hi everyone, I have succesfully implemented pivot controls, but now my model has been displaced. It is supposed to be centered on screen but is not. It is on the bottom left corner cut off. At least the decal pivot controls work haha. Here is my code if someone could help. Thanks!

import React from "react";
import { useSnapshot } from "valtio";
import { useFrame, useThree } from "@react-three/fiber";
import { Decal, useGLTF, useTexture, PivotControls } from "@react-three/drei";
import * as THREE from 'three';
import state from "../store";

const Shirt = () => {
  const snap = useSnapshot(state);
  const { nodes, materials } = useGLTF("/shirt_baked.glb");
  const logoTexture = useTexture(snap.logoDecal);

  // Update shirt color smoothly
  useFrame((_, delta) => {
    const color = new THREE.Color(snap.color);
    materials.lambert1.color.lerp(color, 0.1);
  });

  // State for Decal manipulation
  const [decalProps, setDecalProps] = React.useState({
    position: [0, 0, 0.1],
    rotation: [0, 0, 0],
    scale: [0.25, 0.25, 1]
  });

  // Update decal properties from PivotControls
  const handleDrag = (local) => {
    const position = new THREE.Vector3();
    const scale = new THREE.Vector3();
    const quaternion = new THREE.Quaternion();
    local.decompose(position, quaternion, scale);
    const rotation = new THREE.Euler().setFromQuaternion(quaternion, 'XYZ');

    setDecalProps({
      position: [position.x, position.y, position.z],
      rotation: [rotation.x, rotation.y, rotation.z],
      scale: [0.25 * scale.x, 0.25 * scale.y, scale.z]
    });
  };
  const stateString = JSON.stringify(snap);

  return (
    <group key={stateString}>
      <mesh
        castShadow
        geometry={nodes.T_Shirt_male.geometry}
        material={materials.lambert1}
        dispose={null}
      >
        {snap.isLogoTexture && (
          <>
            <PivotControls
              scale={0.25}
              activeAxes={[true, true, false]}
              onDrag={handleDrag}
              
            />
            <Decal
              position={decalProps.position}
              rotation={decalProps.rotation}
              scale={decalProps.scale}
              map={logoTexture}
              depthTest={true}
              depthWrite={true}
            />
          </>
        )}
      </mesh>
    </group>
  );
};

export default Shirt;
2

if your model is displaced something must have displaced it. there isn’t enough code to help you, it could be anything, a parent component trying to center the mesh etc. the easiest would be to open a codesandbox so we can run it.