Ionic 5 Popover popover arrow

I am using Ionic5, I want to create a popover, popover which ios have i want similar in android, Issue is when popup appear the tooltip is not clearly visible as it goes behind the ion-overlay ( I guess). If I change value of z-index to 12 in inspect of browser for popover-arrow class, it works as expected below is the code for ts and global.scss

Ts file

async presentExpirationPopOver(event: any) {
        this.popover = await this.popoverCtrl.create({
          component: PopoverComponent, // Pass the ng-template reference here
          event,
          mode: 'ios',
          cssClass: 'custom-pop-over',
          showBackdrop:false,
          arrow:true,
        });
        await this.popover.present();
      }
    
    
    
    

SCSS

.custom-pop-over {
  --min-width: 240px;
  --max-width: 260px;
  --border-radius: 6px;
  --border: 1px solid #d0d2d3;
  --padding: 5px;
  --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  

  .popover-wrapper{
    .popover-arrow {
      z-index: 12 !important;  
      }
  }
}

You can try using the shadow part:

.custom-pop-over::part(arrow){
  z-index:12;
}