I am using mat table to show data and my API gives page-wise data.
Now first time it renders and then user changes the page and refreshes the page after, then I want to show 2nd page and not first one.
To do that I have saved the pageIndex to local storage and retrieve when page refreshes and my API also calls page 2nd but the pagination options are wrong as:
Mat Page Options After refesh

Which is showing 1-8; instead it should show 9-15 and also navigation is wrong as it is last page

Here is my HTML

<mat-paginator
      class="mat-paginator-sticky"
      [hidden]="pageLength <= pageSizeOptions[0]"
      [pageSizeOptions]="pageSizeOptions"
      [showFirstLastButtons]="true"
      [length]="pageLength"
      [pageIndex]="page.pageIndex"
      (page)="pageChange($event)"
      aria-label="Select page of users"
    ></mat-paginator>

Here is ts file code snippets

constructor() {
     // Retrieve and set the current page index
     const savedPageIndex = localStorage.getItem('currentPageIndex');
     if (savedPageIndex) {
       this.page.pageIndex = +savedPageIndex;
       
     }
  }

I tried changes as

ngAfterViewInit(): void {
    setTimeout(() => {
      if (this.dataSource) {
        this.dataSource.sort = this.sort;
          this.paginator.pageIndex = this.page.pageIndex;
          this.paginator.pageSize = this.page.pageSize;
          this.paginator.length = this.pageLength;
          this.paginator._changePageSize(this.paginator.pageSize);
          this.dataSource.paginator = this.paginator;
         
      }
    });
  }

I am expecting a way to change or correct the page range label and next prev buttons