ionic react modal

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonChip, IonAvatar,
  IonGrid, IonRow, IonCol, IonInput, IonToggle,
  IonModal,
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import { pin, heart, closeCircle, close } from 'ionicons/icons';

const Tab1: React.FC = () => {
  const [showModal, setShowModal] = useState(false);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Modal Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent >
        <IonModal isOpen={showModal}>
          <IonContent color='secondary'>
            <p>This is modal content</p>
            <IonItem>
              <IonButton slot='start' onClick={() => setShowModal(false)}>Confirm</IonButton>
              <IonButton slot='end' onClick={() => setShowModal(false)}>Cancel</IonButton>
            </IonItem>
          </IonContent>
        </IonModal>
        <IonButton onClick={() => setShowModal(true)}>Show Modal</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default Tab1;