export 'Canvas' (imported as 'Canvas') was not found in '@react-three/drei'

Question

I am successfully install @react-three/drei, "@react-three/fiber and three .

import {React,Suspense,useEffect,useState} from 'react'
import {Canvas} from '@react-three/drei'
import { OrbitControls,Preload,useGLTF } from '@react-three/drei'
import CanvasLoader from '../Loader'


const Computers = () => {
  const computer=useGLTF('./desktop_pc/scene.gltf');
  return (
    <mesh>
      <hemisphereLight intensity={0.15} groundColor="black"/>
      <pointLight intensity={1}/>
      <primitive object={computer.scene}/>

    </mesh>
  )
}
const ComputersCanvas=()=>{
  return(
    <Canvas
      frameLoop="demand"
      shadows
      camera={{position:[20,3,5],fov:25}}
      gl={{preserveDrawingBuffer:true}}
    >
      <Suspense fallback={<CanvasLoader/>}>
        <OrbitControls
          enableZoom={false}
          maxPolarAngle={Math.PI/2}
          minPolarAngle={Math.PI/2}  
      />
        <Computers/>
      </Suspense>
      <Preload all/>

    </Canvas>
  )
}

export default Computers

this is my code . here i import Canvar from @react-three/drei ; but it is show error

Attempted import error: 'Canvas' is not exported from '@react-three/drei' (imported as 'Canvas'). ERROR in ./src/components/canvas/Computers.jsx 45:30-36 export 'Canvas' (imported as 'Canvas') was not found in '@react-three/drei' (possible exports: AccumulativeShadows, AdaptiveDpr, AdaptiveEvents, ArcballControls, AsciiRenderer, BBAnchor, Backdrop, BakeShadows, Billboard, Bounds, Box, Bvh, CameraControls, CameraShake, Capsule, CatmullRomLine, Caustics, Center, Circle, Clone, Clo