Angular material pagination is not working as expected

Question

I have implemented angular pagination in my UI but sometimes it not working as expected. I am explaining my code below.

<mat-paginator (page)="pageEvent = $event; onPaginateChange($event)" [length]="products?.length || 0" [pageIndex]="currentPage" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>


filterSettings: any = {};
sortSettings: any = {sort: {updated_at: 'desc'}};
paging: any = {paging: {page: 0, limit: 10}};
sortKeys: any = [
    {key: 'updated_at', name: 'Date Updated'},
    {key: 'created_at', name: 'Date Created'}
];
sortDirections: any = ['asc', 'desc'];
deleteItem: any;

public currentPage : number = 0;

getFilteredProducts(sortFilterSsettings: any) {
    console.log('filter settings',sortFilterSsettings);

    this.productsService.getAllProducts(sortFilterSsettings)
      .subscribe(res => {
        console.log('res pro',res['data']);
        this.products = res['data'] || [];
        this.filteredProductsArray = this.products;
      })
  }
onPaginateChange(data: any) {
    // const offSet = data.pageIndex * data.pageSize;
    this.paging = {paging: {page: data.pageIndex, size: data.pageSize}};
    const sortFilterSsettings = extend(this.filterSettings, this.sortSettings, this.paging);
    this.getFilteredProducts(sortFilterSsettings);

    // this.filteredProductsArray = this.products.slice(offSet, offSet + data.pageSize);
  }

Here my issue is first time I am fetching 10 records and its displaying correctly but when I am selecting 20 and fetching 20 records then all 20 records are displaying in same page. But as per my requirement it should break into per page 10 and right arrow key will be visible to see more. But in this case all 20 records are coming in same page.