OrbitControls three fiber not working in next js

Here I want the camera orbit to function for right, left, up and down rotation with the object in front using the mouse, object displays fine but not <OrbitControls/>

i have used <PerspectiveCamera/> and <OrbitControls/> but it doesn't work can anyone help me

"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",

delete import from: import clsx from "clsx"; and replace canvas with:

    <Canvas
      className={clsx("w-screen h-screen -z-10 relative", className)}
      shadows={true}
      dpr={[1, 2]}
    >

and add import CameraControls

full script:

"use client";

import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { Environment, CameraControls } from "@react-three/drei";

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

const RenderModel: React.FC<RenderModelProps> = ({ children, className }) => {
  return (
    <Canvas shadows={true} resize={{ scroll: false }} dpr={[1, 2]}>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <Suspense fallback={null}>{children}</Suspense>{" "}
      <spotLight
        intensity={0.5}
        angle={0.1}
        penumbra={1}
        position={[10, 15, 10]}
        castShadow
      />
      <Environment preset="dawn" />
      <CameraControls />
    </Canvas>
  );
};
export default RenderModel;