Navlink not working is not working in react fi

I have created a navbar using bootstrap class but navlink is not working and no error generated in terminal
Here is my Navbar.js file

import React from "react";
import "bootstrap/dist/css/bootstrap.css"
import { NavLink } from "react-router-dom";

const Navbar = ()=>{
  return (
    <div>
      <nav className="navbar navbar-expand-lg bg-body-tertiary" >
  <div className="container-fluid">
    <NavLink className="navbar-brand" href="#">Navbar</NavLink>
    <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 ms-auto mb-2 mb-lg-0">
        
        <li className="nav-item">
          <NavLink className="nav-link" href="/">Home</NavLink>
        </li>
        <li className="nav-item">
          <NavLink className="nav-link" href="/about">About</NavLink>
        </li>
        <li className="nav-item">
          <NavLink className="nav-link" href="/contact">Contact</NavLink>
        </li>
        <li className="nav-item">
          <NavLink className="nav-link" href="/login">Login</NavLink>
        </li>
        <li className="nav-item">
          <NavLink className="nav-link" href="/signup">Register</NavLink>
        </li>
      </ul>
    </div>
  </div>
</nav>
    </div>
  )
}

export default Navbar;

This is App.js file code

import React from "react";
import { Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import Contact from "./components/Contact";
import About from "./components/About";
import Login from "./components/Login";
import Signup from "./components/Signup";

const App = ()=>{
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/login" element={<Login />} />
        <Route path="/Signup" element={<Signup />} />
      </Routes>
    </>
  )
}

export default App;

and this is home.js file

import React from "react";
import { Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import Contact from "./components/Contact";
import About from "./components/About";
import Login from "./components/Login";
import Signup from "./components/Signup";

const App = ()=>{
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/login" element={<Login />} />
        <Route path="/Signup" element={<Signup />} />
      </Routes>
    </>
  )
}

export default App;

Similar to home.js I have created contact and about.js. simple anchor tags are working on the navbar but navlink is not working.