react-router-domv5 + history push does not render component

Well what I am trying to do is just setting up the proper path redirection and routing. I have used react-router-dom and history for this setup. However when I use a button to test the routing, I can see that the url path changes; but it render blank. Does anyone knows the issue here? I have tried looking up from other solution but I don't see any differences from my existing setup. Kindly assist!

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./assets/styles/index.css";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import * as serviceWorker from "./serviceWorker"; 

ReactDOM.render(
  <Router> 
      <App />
  </Router>,
  document.getElementById("root")
);

App.js

import React from "react";
import "./assets/styles/App.css";
import Routes from './utils/routes/index.js';

function App() {
  return (
      <div className="App">
        <Routes/>
      </div>
  );
}

export default App;

Route.js

import React from "react";
import { Router, Switch, Route } from 'react-router-dom'
import MainPage from "../../pages/MainPage";
import GameDisplay from "../../pages/GameDisplay";
import history from '../history/index';

function Routes() {
    return (
      <Router history = {history}>
        <Switch>
          <Route path="/" exact component={MainPage} />
          <Route path="/GameLanding" component={GameDisplay} />
        </Switch>
      </Router>
    );
}

export default Routes;

history.js

import {createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default history;

MainPage.js (button to navigate to other components)

import React from "react";
import Header from "../../components/Header";
import history from "./../../utils/history/index.js";

function MainPage() {
  const handleClick=()=>{
    history.push('/GameLanding');
    window.location.href = window.location.href; //current solution. bad way to solve it :P
  };

  return (
    <div>
      <Header />
      <div style={{ fontSize: "5vh" }}>
        <br />
        Let's play a game of Card! <br />
        <br />
        <br />
        Please enter the number of players :
        <input
          style={{
            width: "10px",
            verticalAlign: "center",
            textAlign: "center",
          }}
          type="text"
          placeholder="0"
        ></input>
        players
        <br />
        <button onClick={handleClick}> LET'S GO!</button>
      </div>
    </div>
  );
}

export default MainPage;

Below are my the snapshots of my error: mainPage blank rendered page