ionic react toolbar

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, IonRefresher, IonRefresherContent,
  IonTextarea, IonSelect, IonListHeader,
  IonSelectOption, IonButtons, IonBackButton,
  IonMenuButton, IonSegment, IonSearchbar,
  IonSegmentButton,
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import {
  personCircle, search, ellipsisHorizontal,
  ellipsisVertical, helpCircle, star, create
} from 'ionicons/icons';
import { RefresherEventDetail } from '@ionic/core';
import axios from 'axios'

const Tab1: React.FC = () => {

  return (
    <IonPage>
      <IonContent>
        <IonToolbar>
          <IonTitle>Toolbar Example</IonTitle>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref="/" />
          </IonButtons>
          <IonTitle>Back Button</IonTitle>
        </IonToolbar>

        <IonToolbar>
          <IonTitle size="small">Small Title above a Default Title</IonTitle>
        </IonToolbar>
        <IonToolbar>
          <IonTitle>Default Title</IonTitle>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="secondary">
            <IonButton>
              <IonIcon slot="icon-only" icon={personCircle} />
            </IonButton>
            <IonButton>
              <IonIcon slot="icon-only" icon={search} />
            </IonButton>
          </IonButtons>
          <IonButtons slot="primary">
            <IonButton color="secondary">
              <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
            </IonButton>
          </IonButtons>
          <IonTitle>Default Buttons</IonTitle>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="secondary">
            <IonButton fill="solid">
              <IonIcon slot="start" icon={personCircle} />
        Contact
      </IonButton>
          </IonButtons>
          <IonTitle>Solid Buttons</IonTitle>
          <IonButtons slot="primary">
            <IonButton fill="solid" color="secondary">
              Help
        <IonIcon slot="end" icon={helpCircle} />
            </IonButton>
          </IonButtons>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="secondary">
            <IonButton fill="outline">
              <IonIcon slot="start" icon={star} />
        Star
      </IonButton>
          </IonButtons>
          <IonTitle>Outline Buttons</IonTitle>
          <IonButtons slot="primary">
            <IonButton color="danger" fill="outline">
              Edit
        <IonIcon slot="end" icon={create} />
            </IonButton>
          </IonButtons>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="secondary">
            <IonButton>Account</IonButton>
          </IonButtons>
          <IonButtons slot="primary">
            <IonButton color="danger">Edit</IonButton>
          </IonButtons>
          <IonTitle>Text Only Buttons</IonTitle>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton autoHide={false} />
          </IonButtons>
          <IonButtons slot="secondary">
            <IonButton>
              <IonIcon slot="icon-only" icon={star} />
            </IonButton>
          </IonButtons>
          <IonTitle>Left side menu toggle</IonTitle>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="primary">
            <IonButton onClick={() => { }}>
              <IonIcon slot="icon-only" icon={star} />
            </IonButton>
          </IonButtons>
          <IonTitle>Right side menu toggle</IonTitle>
          <IonButtons slot="end">
            <IonMenuButton autoHide={false} />
          </IonButtons>
        </IonToolbar>

        <IonToolbar>
          <IonButtons slot="primary">
            <IonButton onClick={() => { }}>
              <IonIcon slot="icon-only" icon={search} />
            </IonButton>
          </IonButtons>
          <IonSearchbar placeholder="Search Favorites" />
        </IonToolbar>

        <IonToolbar>
          <IonSegment>
            <IonSegmentButton value="all">
              All
      </IonSegmentButton>
            <IonSegmentButton value="favorites">Favorites</IonSegmentButton>
          </IonSegment>
        </IonToolbar>

        <IonToolbar color="secondary">
          <IonButtons slot="secondary">
            <IonButton>
              <IonIcon slot="icon-only" icon={personCircle} />
            </IonButton>
            <IonButton>
              <IonIcon slot="icon-only" icon={search} />
            </IonButton>
          </IonButtons>
          <IonButtons slot="primary">
            <IonButton color="primary">
              <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
            </IonButton>
          </IonButtons>
          <IonTitle>Secondary Toolbar</IonTitle>
        </IonToolbar>

        <IonToolbar color="dark">
          <IonButtons slot="secondary">
            <IonButton>
              <IonIcon slot="icon-only" icon={personCircle} />
            </IonButton>
            <IonButton>
              <IonIcon slot="icon-only" icon={search} />
            </IonButton>
          </IonButtons>
          <IonButtons slot="primary">
            <IonButton color="danger">
              <IonIcon slot="icon-only" ios={ellipsisHorizontal} md={ellipsisVertical} />
            </IonButton>
          </IonButtons>
          <IonTitle>Dark Toolbar</IonTitle>
        </IonToolbar>
      </IonContent>
    </IonPage>
  );
};

export default Tab1;