Failed to load resource: the server responded with a status of 504 (Outdated Optimize Dep) with @react-three_drei

I’m trying to use a @react-three/drei" component to manage the 3D models with three, the import is

import { OrbitControls } from '@react-three/drei';

When I use the import on a Test.jsx component. it give the following error:

I’ve tried adding on to the vite.config.js:

optimizeDeps: {     exclude: ['@react-three/drei','three']   } 

and it gives this other error:

here’s my package.json, ando also im using yarn.

{
  "name": "react-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --force",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emailjs/browser": "^3.12.1",
    "@react-three/drei": "^9.97.0",
    "@react-three/fiber": "^8.15.16",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-simple-maps": "^3.0.0",
    "styled-components": "^6.1.8",
    "three": "^0.161.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
    "@vitejs/plugin-react": "^3.0.0",
    "vite": "^4.0.0"
  }
}

and my vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    exclude: ['@react-three/drei','three']
  }

});

I’m trying to manage a 3D model component, so when it works it must look like a canva where you can move a 3D model.