I am new in react , learning react router having issue in Link Tag

Question

My Link tag is not working properly, When I am clicking to another page the URL is changing but it's not redirecting me to that page reloading, So when I reload the website then it's redirecting to that page. No error in the console

I searched for the issue everywhere but I couldn't find the solution. Any help would be much appreciated.

This is the code:

import React from 'react';
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
export default function Header(props){
    return (
    <nav className="navbar navbar-expand-lg bg-light">
      <div className="container-fluid">
        <Link className="navbar-brand" to="/">{props.title}</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 className="nav-link active" aria-current="page" to="/">Home</Link>
            </li>
            <li className="nav-item">
              <Link className="nav-link active" to="/about">About</Link>
            </li>
          </ul>
          { props.searchBar? <form className="d-flex" role="search">
            <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search"></input>
            <button className="btn btn-outline-success" type="submit">Search</button>
          </form>:"Searchbar is not available"}
        </div>
      </div>
    </nav>
    )
};

My App.js code:-

import './App.css';
import Header from './My Components/header.js'
import AddTodo from './My Components/AddTodo'
import Todos from './My Components/todos'
import { About } from './My Components/About'
import Footer from './My Components/footer'
import React, { useState, useEffect } from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
function App() {
  let initTodos = JSON.parse(localStorage.getItem("todos")) || [];
  const onDelete = (todo) => {
      setTodosList(TodosList.filter((e) => {
      return e !== todo;
    }))
    localStorage.setItem("todos", JSON.stringify(TodosList))
  }

  const addTodo = (title, description) => {
    console.log("I am adding this todo", title, description)
    let id;
    if (TodosList.length === 0) {
      id = 1;
    } else {
      id = TodosList[TodosList.length - 1].id + 1;

    }
    let myTodo = {
      id, title, description
    }
    setTodosList([...TodosList, myTodo])
    console.log(' ', myTodo)
  }

  const [TodosList, setTodosList] = useState(initTodos)
  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(TodosList))
  }, [TodosList])
  return (
    <>
      <Router>
        <Header title="My Todo App" searchBar={false} />
        <Switch>
          {/* <Route path="/" render={()=>{
            return(
              <>
              <AddTodo addTodo={addTodo} />
              <Todos todos={TodosList} onDelete={onDelete} />
              </>
            ) 
          }}>
          </Route> */}
          <Route exact path="/">
            <><AddTodo addTodo={addTodo} />
              <Todos todos={TodosList} onDelete={onDelete} />
            </>
          </Route>
          <Route exact path="/about">
            <About />
          </Route>
        </Switch>
        <Footer />
      </Router>
    </>
  );
}

export default App;