React-router-dom is not working with Vite for Switch [duplicate]

I’m creating an web application based on React and Vite. I am also using react-router-dom but when I go to the main page I am getting this error in my browser’s console:

Uncaught SyntaxError: The requested module ‘/node_modules/.vite/deps/react-router-dom.js?v=00b3d007’ does not provide an export named ‘Switch’.

Here is my App.jsx code:

import './App.css'

import React, { Component } from 'react'
import NavBar from './Components/NavBar'
import News from './Components/News'
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

export default class App extends Component {

  render() {
    return (
      <div>
        <Router>
          <NavBar />
          <Switch>
            <Route exact path='/'><News key="general" category="general" /></Route>
            <Route exact path='/business'><News key="business"  category="business" /></Route>
            <Route exact path='/entertainment'><News key="entertainment" category="entertainment" /></Route>
            <Route exact path='/general'><News key="general" category="general" /></Route>
            <Route exact path='/health'><News key="health" category="health" /></Route>
            </Switch>
        </Router>
      </div>
    )
  }
}

These are the dependencies in package.json file:

 "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.23.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "vite": "^5.2.0"
  }

So, can anyone please explain why I am getting this error and how can I resolve it?

I tried to modify main.jsx file by importing browserRouter there.