Invalid Hook Call on Adding React Router DOM and Navbar in Latest React Version

I am creating a Todo List application with Navigation bar and React Router DOM. Everything was working fine before I added Navigation bar and React Router DOM. Now, I’m getting this error:

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

I have imported all the latest components as well as aligned the version of React and React Router DOM.

The code for each file is given below:

App.js

import logo from './logo.svg';
import './App.css';
import Navibar from './components/Navibar';
import { useState } from 'react';
import TodoTask from './components/TodoTask';
import { Route, Routes, BrowserRouter } from 'react-router-dom';
import Footer from './components/Footer';
import AboutUs from './components/AboutUs';
import ContactUs from './components/ContactUs'

function App() {
  return (
    <BrowserRouter>
      <div>
        <Navibar />
        <Routes>
          <Route exact path="/" element={<TodoTask/>}/>
          <Route path="/aboutus" element={<AboutUs />} />
          <Route path="/contactus" element={<ContactUs />} />
        </Routes>
        <Footer />
      </div>
    </BrowserRouter>
  );
}

export default App;

AboutUs.js

import React from 'react';
const AboutUs = () => {
    return (
        <div>
            This is footer
        </div>
    )
}

export default AboutUs;

ContactUs.js

import React from 'react';
const ContactUs = () => {
    return (
        <div>
            This is footer
        </div>
    )
}

export default ContactUs;

Navibar.js

import React from 'react';
import {Link} from "react-router-dom";
const Navibar = () => {
    console.log("Load navigation bar")
    return (
        <div>
             <nav className="navbar navbar-expand-lg bg-light">
                <div className="container-fluid">
                    <Link className="navbar-brand" to="#">navbar</Link>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                        <li className="nav-item">
                                <Link exact className="nav-link active" aria-current="page" to="/">Welcome</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link active" aria-current="page" to="/aboutus">About Us</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/contactus">Contact Us</Link>
                            </li>        
                        </ul>
                        
                    </div>
                </div>
            </nav> 
        </div>
    )
}

export default Navibar;

Package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.7.1",
    "react-scripts": "5.0.1",
    "router-dom": "^2.2.10",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Can someone suggest what I should do to get rid of this error?
Thanks!~