I want to control the corners of my 3d model I have loaded the 3d model now I basically want to control the each individual corners but I am not able to

import { useFrame } from “@react-three/fiber”;
import React, { useEffect, useRef } from “react”;
import { Mesh, Vector3 } from “three”;
import { useAppSelector } from “…/…/hooks”;
import { useLoader } from “@react-three/fiber”;
import { GLTFLoader } from “three/examples/jsm/loaders/GLTFLoader”;
import * as THREE from “three”;

export interface CardProperty {
position: AxisProperty;
rotation: AxisProperty;
size: AxisProperty;
}

export interface AxisProperty {
x: number;
y: number;
z: number;
}

const Card: React.FC = ({ position, rotation, size }) => {
const meshRef = useRef(null);
const autorotation = useAppSelector((state) => state.card.autoRotation);

const bottomLeftValue = useAppSelector(
(state) => state.card.curves.bottomLeft
);
const model = useLoader(GLTFLoader, “…/…/…/public/models/card_model.gltf”);

useEffect(() => {
if (autorotation && meshRef.current) {
const interval = setInterval(() => {
if (meshRef.current) {
meshRef.current.rotation.x += 0.01;
meshRef.current.rotation.y += 0.01;
}
}, 16);

  return () => clearInterval(interval);
}

}, [autorotation]);

return (
<mesh
ref={meshRef}
position={[position.x, position.y, position.z]}
rotation={[rotation.x, rotation.y, rotation.z]}
>
{model && (
<primitive object={model.scene} scale={[size.x, size.y, size.z]} />
)}

);
};

export default Card;