How to go back to previous page with browser's button without using Link tag in React?

In my code I've set up react routing, so that, when a link is clicked, the URL in the browser changes. As I know, Link tag adds the route to routing history when it is clicked and in my case this works perfectly. I can use browser's back and forward buttons to move around just fine, but the problem is, if I navigate to a link manually(like navigating to products by typing /products in the URLhttps://il72h.csb.app/products), I'm not able to get to the home page(https://il72h.csb.app/) by clicking browser's back button and I'm stuck on products page. I tried pushing the route to history when the component got rendered but it didn't help.

Here's the routing code:

import Productpage from "./productpage";
import Aboutpage from "./aboutpage";
import AProductPage from "./individualProductPage";
import Contactpage from "./contact";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Route exact path="/">
          <ul>
            <Link to="/products">
              <li>products</li>
            </Link>
            <Link to="/about">
              <li>about</li>
            </Link>
          </ul>
        </Route>
        <Route exact path="/about">
          <Aboutpage />
        </Route>
        <Route exact path="/products">
          <Productpage />
        </Route>
        <Route path="/products/:id">
          <AProductPage />
        </Route>
        {/* <Route exact path="/o">
          <Contactpage />
        </Route> */}
      </Router>
    </div>
  );
}

How I tried to push a route to the history:

import { Link, useHistory, useLocation } from "react-router-dom";
import Products from "./products";
export default function Productpage() {
  let history = useHistory();
  history.push("/products");
  console.log(history)
  return (
    <div>
      
    </div>
  );
}

How can I solve this problem?