my model broke when it's loaded! | Three.js | Page 1

My Model in blender looks fine but when i load it in my browser it brokes.
below u see my model in blender compared to what it looks like when i use useGLTF hook to load my model.

and this is my code:

import { useRef } from "react";
import { useGLTF } from "@react-three/drei";
import { GLTF } from "three-stdlib";
import { useFrame } from "@react-three/fiber";
import { useTexture } from "@react-three/drei";
import { useContext } from "react";
import { PaintContext } from "../App";

type GLTFResult = GLTF & {
  nodes: {
    frame: THREE.Mesh;
    paint: THREE.Mesh;
  };
};

export default function Frame(props: JSX.IntrinsicElements["group"]) {
  const { nodes } = useGLTF(
    "/assets/models/frames/box-frame.glb"
  ) as GLTFResult;
  const paintContext = useContext(PaintContext);
  const paint = useTexture(
    paintContext?.paint! ? paintContext.paint : "/assets/textures/Mona_Lisa.jpg"
  );
  const frame = useTexture(
    paintContext?.frame! ? paintContext.frame : "/assets/textures/wood.jpg"
  );

  const groupRef = useRef<THREE.Group>(null!);
    useFrame((state, delta) => (groupRef.current.rotation.z += delta));
  return (
    <group {...props} rotation={[Math.PI / 2, 0, 0]} ref={groupRef}>
      <mesh
        geometry={nodes.frame.geometry}
        rotation={[Math.PI / 2, 0, -Math.PI / 2]}
      >
        <meshStandardMaterial color={"red"} />
      </mesh>
      <mesh
        geometry={nodes.paint.geometry}
        position={[-0.08, 0, 0]}
        rotation={[(Math.PI * 2) / 2, 0, -Math.PI / 2]}
        scale={[1.02, 1, 1.03]}
      ></mesh>
    </group>
  );
}

useGLTF.preload("/assets/models/frames/box-frame.glb");

im using gltfjsx to turn my gltf to tsx componant.

#my model broke when it's loaded!