React-Router is changing URL but PAGE is not loading

Question

Everything is working quite fine and I have set the links to the pages. The Problem is when I click on a link on the Navbar, the URL changes but page doesn't render. However, the page renders when refreshed manually. What should I do to make that work properly?

Here is the code :

import './App.css';
import Header from './MyComponents/Header';
import { Todos } from './MyComponents/Todos';
import { Footer } from './MyComponents/Footer';
import { AddToDo } from './MyComponents/AddToDo';
import { About } from './MyComponents/About';
import React, { useState, useEffect } from 'react';
import { BrowserRouter, Switch, Route } from "react-router-dom";

function App() {
  let initTodo;
  if (localStorage.getItem("todos") === null) {
    initTodo = [];
  } else {
    initTodo = JSON.parse(localStorage.getItem("todos"));
  }

  const onDelete = (todo) => {
    setTodos(todos.filter((e) => {
      return e!==todo;
    }));
    localStorage.setItem("todos", JSON.stringify(todos));
  }

  const addTodo = (title, desc) => {
    let sno;
    if (todos.length == 0) {
      sno = 0;
    } else {
      sno = todos[todos.length-1].sno + 1;
    }

    const myTodo = {
      sno: sno,
      title: title,
      desc: desc,
    };

    setTodos([...todos, myTodo]);
  }

  const [todos, setTodos] = useState(initTodo);

  useEffect(() => {
    localStorage.setItem("todos", JSON.stringify(todos));}, [todos])

  return (
    <>
      <BrowserRouter>
        <Header title="MyTodosList" searchBar={true} />
        <Switch>
          <Route
            exact
            path="/"
            render={() => {
              return (
                <>
                  <AddToDo addTodo={addTodo} />
                  <Todos todos={todos} onDelete={onDelete} />
                </>
              )}
            }
          />
          <Route exact path='/about' component={About} />
        </Switch>
        <Footer />
      </BrowserRouter>
    </>
  );
}

export default App;