ionic react action sheet

//Tab1.tsx

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonActionSheet, IonButton
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import { trash, share, playCircleOutline, heart, close } from 'ionicons/icons';

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

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 1</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonButton onClick={() => setShowActionSheet(true)} expand="block">Show Action Sheet</IonButton>
        <IonActionSheet
          isOpen={showActionSheet}
          onDidDismiss={() => setShowActionSheet(false)}
          buttons={[{
            text: 'Delete',
            role: 'destructive',
            icon: trash,
            handler: () => {
              console.log('Delete clicked');
            }
          }, {
            text: 'Share',
            icon: share,
            handler: () => {
              console.log('Share clicked');
            }
          }, {
            text: 'Play (open modal)',
            icon: playCircleOutline,
            handler: () => {
              console.log('Play clicked');
            }
          }, {
            text: 'Favorite',
            icon: heart,
            handler: () => {
              console.log('Favorite clicked');
            }
          }, {
            text: 'Cancel',
            icon: close,
            role: 'cancel',
            handler: () => {
              console.log('Cancel clicked');
            }
          }]}
        >
        </IonActionSheet>
      </IonContent>
    </IonPage>
  );
};

export default Tab1;

reference:
https://ionicframework.com/docs/api/action-sheet
https://chuanshuoge2.blogspot.com/2020/04/ionic-react.html