Hydration error

[JeroenMoonen]

When navigating to a specific page using routerLink, everything goes well. When manually refreshing the page, I get an Hydration error. How do I solve this issue?

The error:

The content of the page, where the Hydration error occurs:

import {
  IonBackButton,
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import React from 'react';

export default function Schedule(): React.JSX.Element {
  return (
    <>
      <IonPage>
        <IonHeader>
          <IonToolbar color="light">
            <IonButtons slot="start">
              <IonBackButton defaultHref="/"></IonBackButton>
            </IonButtons>
            <IonTitle>Schedule</IonTitle>
            <IonButtons slot="end">
              <IonButton routerLink="/booking/create">Create</IonButton>
            </IonButtons>
          </IonToolbar>
        </IonHeader>
        <IonContent className="ion-padding" color="light" role="feed">
          <h2>Lorem ipsum</h2>
          <p className="medium grey">Dolor sit amet.</p>
        </IonContent>
      </IonPage>
    </>
  );
}

[MDxWARRIORxOP]

Having the exact same error with ion-toolbar. Anyone find a solution yet?