IonTabs inside a page

I need to have tabs inside a specific page.
This is my code:

          { showQrCodeModal ? (
            <IonModal isOpen={showQrCodeModal}>
              <IonButton slot="end" onClick={() => dismissQrCodeModal()}>
        ) : null 

          <IonRow class="user-row">
            <IonCol class="ion-text-center" size="12">
              <IonText> <h2> <strong>{t("Hello")}, {name} </strong> </h2></IonText>

              <IonImg src={`${BASE_URL}/assets/images/slide6.svg`} className="dashboard-img" />

          <IonRow class="ion-text-center">
              <br />
              <IonButton onClick={(e) => clickQrCodeButton(e)}>
                {t("Scan QR Code")}

          <IonRow class="ion-text-center">
            <IonTabBar slot="bottom">
              <IonTabButton tab="schedule">
                <IonIcon icon={calendar} />

              <IonTabButton tab="cart" href={PATH_VIRTUAL_CART}>
              <IonIcon icon={cartOutline} />

              <IonTabButton tab="map">
                {/* <IonIcon icon={map} /> */}

              <IonTabButton tab="about">
                <IonIcon icon={informationCircle} />

The problem is that I can’t see the tabs at the bottom of the page.
If I modify in the source of a page the <div class="ion-page ion-page-invisible"> setting opacity equal to 1 I see the bottom tabs in the right position but the content of the page is not clickable (probably the content is covered by the tabs container).
How can I solve?
What am I doing wrong?