Три волокна OrbitControls не работают в следующем js

Здесь я хочу, чтобы орбита камеры функционировала для вращения вправо, влево, вверх и вниз с объектом впереди с помощью мыши, объект отображается нормально, но нет <OrbitControls/>

я использовал <PerspectiveCamera/> и <OrbitControls/>, но это не работает, может кто-нибудь мне помочь

"use client";

import React, { Suspense } from "react";
import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import clsx from "clsx";

interface RenderModelProps {
  children: React.ReactNode;
  className?: string;
}

const RenderModel: React.FC<RenderModelProps> = ({ children, className }) => {
  return (
    <Canvas
      className = {clsx("w-screen h-screen -z-10 relative", className)}
      shadows = {true}
      dpr = {[1, 2]}
    >
      <PerspectiveCamera position = {[0, 0, 5]} fov = {75} near = {0.1} far = {1000} />
      <OrbitControls
        minZoom = {2}
        maxAzimuthAngle = {20}
        enableZoom = {true}
        enablePan = {true}
        enableRotate = {true}
      />
      <mesh>
        <boxGeometry />
        <meshBasicMaterial color = {"blue"} />
      </mesh>
    </Canvas>
  );
};

export default RenderModel;

"@react-three/drei": "^9.105.4",
"@react-three/fiber": "^8.16.2",
"three": "^0.164.1",