Chromeが２回リロードしてしまうのを１回にしたいです

import { BrowserRouter, Route, Link, Routes } from "react-router-dom";
import { legacy_createStore as createStore } from "redux";

const App = () => (
  <BrowserRouter>
    <div className="container text-center mt-5">
      <Routes>
        <Route exact path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </div>
  </BrowserRouter>
);

const vote = (state = 0, action) => {
  switch (action.type) {
    case `ADD`:
      return state + 1;
    default:
      return state;
  }
};

let store = createStore(vote);

const Home = () => {
  store.dispatch({ type: `ADD` });
  let x = store.getState().toString();
  return (
    <div>
      <h1>Welcome</h1>
      <p>投票数：{x}</p>
      <p>
        <Link to="/about">About</Link>
      </p>
    </div>
  );
};

const About = () => {
  store.dispatch({ type: `ADD` });
  let x = store.getState().toString();
  return (
    <div>
      <h1>About</h1>
      <p>投票数：{x}</p>
      <p>
        <Link to="/">Home</Link>
      </p>
    </div>
  );
};

export default App;