disappearing style attribute from p-datepicker-panel

[WhistlerSupport]

I am on angular 18 and primeng 18

In a page I use a calendar / datepicker in an input form, then display a list of input in a p-table under it. Its discovered that, randomly, the datepicker will lost its style attribute after I added more [value] to the p-table

conponent.html

<div>
    <p-calendar selectionMode="multiple" [(ngModel)]="selectedDates" (onSelect)="showselectedDate()" />
    <p-button label="Add Roster" [disabled]="!selectedDates"(onClick)="addNew()" icon="pi pi-plus" />
</div>
<p-table [value]="showedItems" selectionMode="multiple" [(selection)]="selectedItems"
sortField="date" styleClass="p-datatable-gridlines"
    [metaKeySelection]="metaKey" dataKey="id" [tableStyle]="{ 'min-width': '50rem' }">
    <ng-template pTemplate="header"><tr><th>Shop</th><th>Date </th><th>Roster</th><th>Time</th></tr></ng-template>
    <ng-template pTemplate="body" let-item let-rowIndex="rowIndex"><tr [pSelectableRow]="item" [pSelectableRowIndex]="rowIndex"><td>blablabla</td></tr></ng-template>

component.ts

addItems? : Item[];
addNew(){
this.itemService.addItems(this.addItem)
this.showedItems = this.itemService.getItemsById(this.selectedHeader!.id)
this.selectedDates = [];
}

so when the page first loads, the p-datepicker-panel has the following div in the html code

<div class="ng-trigger ng-trigger-overlayAnimation ng-tns-c4267106065-6 p-datepicker-panel p-component ng-star-inserted" ng-reflect-ng-class="[object Object]" id="pn_id_25_panel" aria-label="Choose Date" role="dialog" aria-modal="true" pn_id_25=""
 style="z-index: 1002; top: 36px; left: 0px; transform-origin: center top; margin-top: 2px;">

but after I have clicked the add button, selection from datepiacker cleared, new line items appeared in p-table, the style will be gone and the div only has this

<div class="ng-trigger ng-trigger-overlayAnimation ng-tns-c4267106065-6 p-datepicker-panel p-component ng-star-inserted" ng-reflect-ng-class="[object Object]" id="pn_id_25_panel" aria-label="Choose Date" role="dialog" aria-modal="true" pn_id_25=""
>

which caused most of the datepicker element to be covered by the other html elements due to the lost of z-index, the page become quite unusable.
I can subsequently clear more of the page, e.g. select some different header and have the p-table data completely overhualed, then the calender / datepicker element regains the style and works normally again

I could not find any reference to z-index in the code of datepicker, may I know where did the z-index come from? and is this a feature or bug I am seeing?