React Router v5 not rendering route when clicking link

Question

I got an unexpected problem while working on a react project. When I was trying to click on appointment in the navigation menu, It doesn't go to the component. But when I reload the page then It goes to the component. Can anyone tell me why this problem happened?

"react": "^18.0.0", "react-router-dom": "^5.3.0",

//App component 
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import './App.css';
import Home from './Pages/Home/Home/Home';
import NotFound from './Pages/NotFound/NotFound';
import Appointment from './Pages/Appointment/Appointment';

function App() {
  return (
    <Router >
      <Switch>


        <Route path="/home">
          <Home></Home>
        </Route>

        <Route path="/appointment">
          <Appointment></Appointment>
        </Route>

        <Route exact path="/">
          <Home></Home>
        </Route>
        <Route path="*">
          <NotFound></NotFound>
        </Route>


      </Switch>
    </Router>
  );
}

export default App;

//Navigation component
import React from 'react';
import './Navigation.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEye } from '@fortawesome/free-solid-svg-icons'
import { Link } from 'react-router-dom';

const Navigation = () => {
    return (
        <nav class="navbar navbar-expand-lg eye-pearl-navbar navbar-dark sticky-top">
            <div class="container">
                <a class="navbar-brand eye-pearl-navbar-brand" href="#"> <FontAwesomeIcon icon={faEye} /> EyePearl</a>
                <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 ms-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <Link class="nav-link active" aria-current="page" to="/home">Home</Link>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                            <Link class="nav-link active" to='/appointment'>Appointment</Link>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Shop</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active" href="#">Contact</a>
                        </li>


                    </ul>

                </div>
            </div>
        </nav>
    );
};

export default Navigation;