ionic react loading

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonDatetime, IonFooter,
  IonList, IonItemDivider, IonTextarea, IonAvatar,
  IonText, IonThumbnail, IonSelectOption, IonInput,
  IonSelect, IonCheckbox, IonToggle, IonRange,
  IonNote, IonRadio, IonItemSliding, IonItemOption,
  IonItemOptions, IonListHeader, IonChip, IonImg,
  IonLoading,
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab2.css';
import {
  closeCircle, home, star, navigate,
  informationCircle, checkmarkCircle, shuffle
} from 'ionicons/icons';

const Tab2: React.FC = () => {
  const [showLoading, setShowLoading] = useState(true);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Loading Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonButton onClick={() => setShowLoading(true)}>Show Loading</IonButton>
        <IonLoading
          isOpen={showLoading}
          //onDidDismiss={() => setShowLoading(false)}
          message={'Please wait...'}
        // duration={5000}
        />
      </IonContent>
    </IonPage >
  )
}

export default Tab2;