React routing in not working in react js?

am stuck with a problem , I tried to solve lots of time but not got any way, in my simple react application I want to make routing but its not working, when I click on home or add user link its not redirect on that page, please let me know where am wrong.

App.js

import "./App.css";
import Navbar from "./components/Navbar";
import { BrowserRouter, Routes, Route,Switch } from "react-router-dom";
import AddUser from "./components/AddUser";
import EditUser from "./components/EditUser";
import Home from "./components/Home";

function App() {
  return (
    <BrowserRouter>
      <Navbar />
      <div className="App">
        <Routes>
          <Route exact path="/" component={Home} />
          <Route exact path="/adduser" component={AddUser} />
          <Route exact path="/edituser" component={EditUser} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Navbar.js

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

import React from "react";
import { Link } from "react-router-dom";

const Navbar = () => {
  return (
    <div>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <Link to="/" class="navbar-brand font-weight-blod">
            Crud Application
          </Link>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <Link to="/" class="nav-link active" aria-current="page">
                  Home
                </Link>
              </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <Link
                to="/adduser"
                class="btn btn-outline-primary my-2 my-sm-0"
                type="submit"
              >
                Add User
              </Link>
            </form>
          </div>
        </div>
      </nav>
    </div>
  );
};

export default Navbar;

This is the Home page where i want to redirect when I click on Home
link

import React from 'react'

    const Home = () => {
        return (
            <div>
                <h1>Welcome to Home Page</h1>
            </div>
        )
    }
    
    export default Home

>Solution :

Try this

<Route exact path="/" component={<Home />} />