I'm working on a website that for now, only has a text and a floating 3D logo on the right. The thing is, when I'm watching the object, the animation runs at 60fps and the website runs smoothly, but when I'm not watching the object, the website has a lot of lag and it's unusable so, I wanted to know why that happens and how I can fix it.

Here's my code:

index.js

<div className={styles.logo}>
    <Suspense fallback={null}>
        <Canvas gl={{antialias: true, powerPreference: 'high-performance'}} dpr={[0.8, 1.8]}>
            <Logo />
            <Environment background={false} files="/images/env2.hdr" near={1} far={1000} resolution={256} />
        </Canvas>
    </Suspense>
</div>

logo.js

export default function Logo({ ...props }) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/images/RB_Maquillaje_2-transformed.glb')

  useFrame((state) => {
    const t = state.clock.getElapsedTime()
    group.current.position.y = Math.sin(t) * 0.2;
    group.current.rotation.y = Math.sin(t / 1.5) / 15
  })

  return (
    <group ref={group} {...props} dispose={null}>
      <motion.mesh initial={{scale: 0}} animate={{scale: 1}}
      transition={{duration: 0.5, type: 'spring', stiffness: 200, damping: 20}}
      geometry={nodes.BezierCurve004.geometry} material={materials['Material.001']} rotation={[0, -0.2, 0]} position={[0, -0.2, 1]} />
    </group>
  )
}

useGLTF.preload('/images/RB_Maquillaje_2-transformed.glb')