React Page is Loading on Redirect but has no functionality unless I manually refresh

Question

first-time poster here and I need some help. I have a simple react app with a main page and a members only section. To enter the members only section you need to connect your MetaMask wallet. I have added this functionality and it works but when the members only page appears in the browser, the scroll bar is missing and the link in the nav section to go back to the main page just makes the browser URL flash the localhost:3000/ then stays on localhost:3000/members. If I manually refresh the page my scrollbar appears and the page functions like it should. I don't understand what is going wrong and I am at my wits end trying to fix this.

App.js

import bootstrap from "bootstrap";
import MainPage from "./views/MainPage";
import Members from "./views/Members";
import "bootstrap/dist/css/bootstrap.min.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Web3ReactProvider } from "@web3-react/core";

import Web3 from "web3";

function getLibrary(provider) {
  return new Web3(provider);
}

function App() {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Router >
        <div className="">
          <Switch>
            <Route exact path="/members" component={Members} />
            <Route path="/" component={MainPage} />
          </Switch>
        </div>
      </Router>
    </Web3ReactProvider>
  );
}

export default App;

MemberCheck.js

import { useWeb3React } from "@web3-react/core";
import { useHistory,Redirect } from "react-router-dom";
import { injected } from "./wallet/Connect";

export default function MemberCheck() {
  const { active, account, library, connector, activate, deactivate } =
    useWeb3React();

  async function connect() {
    try {
      await activate(injected);
      console.log("connected");
    } catch (ex) {
      console.log(ex);
    }
  }

  let history = useHistory()


  return (
    <div>
      <li
        onClick={connect}

        className="nav-item memberCheck"
        style={{
          textDecoration: "none",
          color: "white",
          fontFamily: "scary",
          fontSize: "2rem",
        }}
      >
        MEMBERS ONLY
        {active ? history.push("/members") : <Redirect to="/" />}
      </li>
    </div>
  );
}

Thanks in advance!