ionic react notification

click notify button, 2 secs later notification shows up

 //tab1.tsx

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, IonFooter, IonText, IonToast,
  useIonViewDidEnter, useIonViewDidLeave,
  useIonViewWillEnter, useIonViewWillLeave
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab1.css';
import {
  person
} from 'ionicons/icons';
import { RefresherEventDetail } from '@ionic/core';
import axios from 'axios'
import { Plugins } from '@capacitor/core';

const Tab1: React.FC = () => {
  const { LocalNotifications } = Plugins;
  const notifs = async () => {
    await LocalNotifications.schedule({
      notifications: [
        {
          title: "Team Up Event",
          body: "When:  Wed Jun 24, 2020\
          \nCalendar: Vacation/Out of Office\
          \nWho:  Bob\
          \nCreated by: Bob on Wed May 27, 2020 11:00 AM (Time zone: Mountain Time US & Ca)",
          id: 1,
          schedule: { at: new Date(Date.now() + 1000 * 2) },
          sound: undefined,
          attachments: undefined,
          actionTypeId: "",
          extra: null
        }
      ]
    });
  }

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>notifications Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          <IonItem>
            <IonButton onClick={() => notifs()}>notify</IonButton>
          </IonItem>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

export default Tab1;

---------------------------

//capacitor.config.json

{

  "appId": "io.ionic.starter",

  "appName": "abc",

  "bundledWebRuntime": false,

  "npmClient": "npm",

  "webDir": "build",

  "cordova": {},

  "plugins": {

    "LocalNotifications": {

      "iconColor": "#488AFF"

    }

  }

}

------------------------------

reference:

https://stackoverflow.com/questions/53925894/ionic-what-is-the-correct-way-to-change-icon-in-local-notifications-plugin/54115579#54115579

https://capacitor.ionicframework.com/docs/apis/local-notifications