I want multiple copies of the same object on the canvas. However, when I try, only one copy of that object actually gets rendered to the screen

Question

when calling canvas multiple time it appear once n disappear to the last canvas that I call i dont know how to fix it

<div className="my-32 gap-5 md:md-24 grid grid-cols-1 sm:grid-cols-3 2xl:grid-cols-4 ">
          <UserNFTcard />
          <UserNFTcard />
          <UserNFTcard />
          <UserNFTcard />
        </div>

in this above code 3dModel canvas is been call 4 times but only on the last one is appear

import card3d from "../../ui/assets/card/card03.gltf";

// THREE.DefaultLoadingManager.addHandler(/\.dds$/i, new DDSLoader());


const CardModel = ({
  stopMove,
  setStopMove,
}: {
  stopMove: boolean;
  setStopMove: React.Dispatch<React.SetStateAction<boolean>>;
}) => {
  const Ref: any = useRef();



  const gltf = useLoader(GLTFLoader, card3d);

  return (
    <primitive
      ref={Ref}
      // @ts-ignore
      object={gltf.scene}
      scale={1.5}

    />
  );
};

const UserNFTcard = () => {
  const [stopMove, setStopMove] = useState<boolean>(false);

  return (
    // <div className="w-full h-96 flex justify-center items-center">
    <div className="w-full h-96 flex justify-center items-center">
      {/* <div className="w-52 h-full bg-white"> */}
      <div className="w-full h-full">
        <Suspense fallback={null}>
          <Canvas>
            <ambientLight intensity={0.8} color="white" />
   
            <OrbitControls minPolarAngle={Math.PI / 2} maxPolarAngle={-Math.PI / 2} enableZoom={false} />
            <CardModel stopMove={stopMove} setStopMove={setStopMove} />
          </Canvas>
        </Suspense>
      </div>
    </div>
  );
};

export default UserNFTcard;

need to call it in all the canvas need help??????