Issue with GLB/GLTF asset staying still on canvas and just rotating around y-axis, it jumps around with scrolling and I want to make the asset small

Question

Issue with GLB/GLTF asset staying still on canvas and just rotating around y-axis, it jumps around with scrolling and I want to make the asset small with respect to the size of the page because when the asset is rotating automatically around the y-axis it sometimes gets cut off by the edge of the page. But more importantly when I'm scrolling the asset seems to be coming closer to the camera until it's up close. Please I need help with this:

import './css/Model.css';
import { useRef } from 'react';
import { Canvas, useFrame} from '@react-three/fiber';
import { useGLTF, Stage} from '@react-three/drei';


function ModelComponent() {
    const { scene } = useGLTF('/modela.glb');
    const modelRef = useRef();
  
    useFrame(() => {
      if (modelRef.current) {
        modelRef.current.rotation.y += 0.01; // Adjust the rotation speed here
      }
    });
  
    return <primitive object={scene} ref={modelRef}/ >;
}



function Model() {

    return (
        <div className='intro-col'>
            <Canvas className='asset' shadows dpr={[1, 2]} camera={{ fov: 75, near: 0.1, far: 1000, position: [0, 2, 10]}} gl={{ preserveDrawingBuffer: true }}>
                <Stage environment="sunset">
                    <ModelComponent/>
                </Stage>
            </Canvas>
        </div>
    );
}

useGLTF.preload("/modela.glb");

export default Model; 
.intro-col {
    height: 100vh;
}