Why do all react ionic states reset when I change routes?

Question

I am having a problem where all my state variables (held in the parent component) get reset whenever I switch between routes. This project is using Ionic React with ionic's IonReactRouter and IonRouterOutlet components. When I change the url in any way (from say 'localhost:8100/home' to 'localhost:8100') all the states go back to what they are initialized to. I think it has something to do with how I am declaring the child components since in TypeScript you have to tell the type of the props and I could be doing that wrong. This is my first exposure to TypeScript.

Here is how I create a state variable in App (parent component) using useState hook:

  const [history, setHistory] = useState([
    "2 + 2 = 4",
    "5 * 5 = 25",
    "10 + 5 = 15",
  ]); //state for past calculations

This is later down in App.tsx where I send the states to the 2 components:

    <IonApp>
      <IonReactRouter>
        <Menu />
        <IonRouterOutlet id="main">
          <Route exact path="/home">
            <Home
              history={history}
              operand={operand}
              runningTotal={runningTotal}
              operation={operation}
              calcComplete={calcComplete}
              addDigit={addDigit}
              chooseOperation={chooseOperation}
              evaluate={evaluate}
              equals={equals}
              clear={clear}
            />
          </Route>
          <Route exact path="/">
            <Redirect to="/home" />
          </Route>
          <Route exact path="/history">
            <CalculationHistory history={history} />
          </Route>
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>

This is the CalculationHistory component (child of App):

  return (
    <IonPage>
      <IonHeader className="header">
        <IonTitle>Calculation History</IonTitle>
        <IonToolbar className="toolbar">
          <IonMenuButton slot="start"></IonMenuButton>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          {history &&
            history.map((calculation: string, index: number) => (
              <IonItem key={index}>
                <IonText>{calculation}</IonText>
              </IonItem>
            ))}
        </IonList>
      </IonContent>
    </IonPage>
  );
};
export default CalculationHistory;

This is part of Home.tsx component (also child of App switched to through router):

const Home: React.FC<{
  addDigit: any;
  chooseOperation: any;
  evaluate: any;
  equals: any;
  clear: any;
  history: any[];
  operand: string;
  runningTotal: string;
  operation: string;
  calcComplete: boolean;
}> = ({
  addDigit,
  chooseOperation,
  evaluate,
  equals,
  clear,
  history,
  operand,
  runningTotal,
  operation,
  calcComplete,
}: any) => {
  return (
    <IonPage>
      <IonHeader className="header">
        <div className="knotch"></div>
        <IonToolbar className="toolbar">
          <IonMenuButton slot="start"></IonMenuButton>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonRow className="dark-purple-line"></IonRow>
        <div className="main">
          <div className="output">
            {/* Output */}
            <div className="runningTotal">
              {runningTotal} {operation}
            </div>
            <div className="operand">{operand}</div>
            <div className="white-line"></div>
          </div>
          <IonGrid>
            <IonRow>
              <IonCol>
                <IonButton
                  onClick={clear}
                  className="ionButton"
                  fill="outline"
                  shape="round"
                >
                  C
                </IonButton>
              </IonCol>
...

So every time I switch between Home and CalculationHistory, history (and all other states) get reinitialized. Any help is greatly appreciated. Thank you in advance.