ionic react popover

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, IonFab, IonFabButton,
  IonFabList, IonItemGroup, IonItemSliding,
  IonItemOptions, IonItemOption, IonNote, IonMenu,
  IonRouterOutlet, IonListHeader, IonMenuToggle,
  IonButtons, IonMenuButton, IonInput, IonSplitPane,
  IonPopover
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';

const Tab3: React.FC = () => {
  const [showPopover, setShowPopover] = useState(false);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Popover Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent >
        <IonPopover
          isOpen={showPopover}
          onDidDismiss={e => setShowPopover(false)}
        >
          <IonContent color='primary'>
            <p>This is popover content</p>
            <IonItem>
              <IonButton slot='start' onClick={() => setShowPopover(false)}>Confirm</IonButton>
              <IonButton slot='end' onClick={() => setShowPopover(false)}>Cancel</IonButton>
            </IonItem>
          </IonContent>
        </IonPopover>
        <IonButton onClick={() => setShowPopover(true)}>Show Popover</IonButton>
      </IonContent>
    </IonPage>

  );
};

export default Tab3;