Lazy loading data in table with global filter using Angular + PrimeNG

I have created a datatable with both Lazy loading and global filter features. I used PrimeNG components for the implementation. But I found that the global filter is not working when lazy loading is enabled, i.e. [lazy]="true".

HTML Code :

<input #gc type="text" pInputText size="30" placeholder="Global Filter" class="element-space">

<p-dataTable [value]="infoList" [rows]="5" [globalFilter]="gc" [totalRecords]="records" (onLazyLoad)="loadInfo($event)"
  scrollable="true" scrollHeight="200px" virtualScroll="virtualScroll" selectionMode="single" [(selection)]="selectedInfo"
  (onRowSelect)="onInfoRowSelect($event)" dataKey="infoId" class="break-word" resizableColumns="true" [lazy]="true">

TS code :

    lazyLoadOutInfo(event: LazyLoadEvent) {
    setTimeout(() => {
        if (this.infoListData) {
            this.infoList= this.infoListData.slice(event.first, (event.first + event.rows));
        }
    }, 25);
}

I need to have both features working, does anybody have a clue here ?