My page is not refreshing when i use history.push even though the URL changes

I am using ionic and react with IonReactRouter for navigation. When I use history.push, it changes the URL but the page doesn't refresh on the change.

I've tried putting Switch inside the IonRouterOutlet. I've tried pushing the history in different parts of the code. Neither of those work...

If anyone has some advice, I'd appreciate it a lot!

App.js

interface StateProps {
  loadAllWorkouts: () => void;
}

const App: React.FC<StateProps> = (props: StateProps) => {
  return (
    <IonApp>
      <IonReactRouter>
        <SideDrawer />
        <IonRouterOutlet id="main">
            <Route exact path="/login" component={Login} />
            <Route exact path="/signup" component={SignUp} />

            <Route exact path="/workouts" component={WorkoutList} />
            <Route path="/workouts/:workoutId" component={WorkoutDetails} />
            <Route path="/start-workout/:workoutId" component={StartWorkout} />

            <Route exact path="/profile" component={Profile} />
            <Route exact path="/dashboard" component={Dashboard} />
            <Route exact path="/goals" component={Goals} />

            <Redirect to="/login" />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );
};

Login.tsx

const Login: React.FC<InjectedFormProps> = (props: any) => {
  const submitForm = (values: any) => {
    const userData = {
      email: values.email,
      password: values.password,
    };
    props.onLogin(userData);

/******THIS IS WHERE I PUSH THE HISTORY TO A NEW URL*******/
    history.push("/workouts");
  };

  const { pristine, submitting, invalid, handleSubmit } = props;
  const { login } = props.loginInfo;

  return (
    <IonPage>
      <IonHeader className="ion-no-border ion-padding">
        <IonToolbar>
          <IonButton disabled strong size="large" fill="clear" expand="block">
            <IonIcon icon={lockClosedOutline} />
          </IonButton>
          <IonToolbar>
            <IonTitle className="ion-text-center" size="large">
              Login
            </IonTitle>
          </IonToolbar>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <form onSubmit={handleSubmit(submitForm)} noValidate>
          <IonGrid>
            <IonRow>
              <Field
                name="email"
                title="Email Address"
                type="text"
                id="email"
                autoComplete="email"
                pattern="email"
                required
                inputmode="email"
                component={ReduxFormInput}
              />
            </IonRow>
            <IonRow>
              <Field
                name="password"
                title="Password"
                type="password"
                id="password"
                required
                component={ReduxFormInput}
              />
            </IonRow>
          </IonGrid>
          <IonButton
            type="submit"
            expand="block"
            disabled={login.loading || pristine || invalid || submitting}
          >
            Sign In
            {login.loading && <IonLoading isOpen={login.loading} />}
          </IonButton>
          <IonButton fill="clear" href="signup">
            Don't have an account? Sign Up
          </IonButton>
          {/* {errors.general && <p>{errors.general}</p>} */}
        </form>
      </IonContent>
    </IonPage>
  );
};
/* ....other code ....*/

history.js

var createBrowserHistory = require("history").createBrowserHistory;

const history = createBrowserHistory();

export default history;