MatPaginator Range is not updating correctly

Question

I have a total of 4 items coming from the API. The table should show 5 items initially and then the others based on the number of items selected. On page load the range shows 1-4 of 4 but when I select 2 items per page the range shows 1-2 of 2 when it should show 1-2 of 4. This is the same for all the other page sizes I choose.

This is the template below

<table class="table" mat-table matSort [dataSource]="dataSource">

                <!-- Define the columns -->
                <ng-container matColumnDef="actions">
                    <th mat-header-cell *matHeaderCellDef>Actions</th>
                    <td mat-cell *matCellDef="let customer">
                        <button ngClass="btn-dark-blue-small" aria-label="Modify record" matTooltip="Modify"
                            (click)="updateCustomer(customer)"><mat-icon>edit</mat-icon></button>
                    </td>
                </ng-container>
                <ng-container matColumnDef="_id" class="d-none">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header class="d-none">ID</th>
                    <td mat-cell *matCellDef="let customer" class="d-none">{{customer.customer._id}}</td>
                </ng-container>
                <ng-container matColumnDef="companyName">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Company Name</th>
                    <td mat-cell *matCellDef="let customer">{{customer.customer.companyName}}</td>
                </ng-container>

                <ng-container matColumnDef="firstName">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>
                    <td mat-cell *matCellDef="let customer">{{customer.customer.firstName}}</td>
                </ng-container>

                <ng-container matColumnDef="lastName">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>
                    <td mat-cell *matCellDef="let customer">{{customer.customer.lastName}}</td>
                </ng-container>

                <ng-container matColumnDef="email">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Email</th>
                    <td mat-cell *matCellDef="let customer">{{customer.customer.email}}</td>
                </ng-container>

                <ng-container matColumnDef="contactNum">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Contact Number
                    <td mat-cell *matCellDef="let customer">{{ customer.customer.contactNum }}</td>
                </ng-container>
                <ng-container matColumnDef="acceptedTermsAndConditions">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Accepted Terms & Conditions</th>
                    <td mat-cell *matCellDef="let employee">
                        {{ employee.customer.acceptedTermsAndConditions? "Yes" : "No"}}</td>
                </ng-container>
                <ng-container matColumnDef="subscriptions">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Subscriptions</th>
                    <td mat-cell *matCellDef="let customer">
                        <p *ngFor="let subscription of customer.subscriptions">{{subscription}}</p>
                    </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumns" matHeaderRowDefSticky="true"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
            </table>
            <mat-paginator #paginator [pageSizeOptions]="pageSizeOptions" [length]="totalCustomers"
                [pageSize]="limit" [pageIndex]="currentPageIndex" (page)="onPageChange($event)" showFirstLastButtons
                aria-label="Select page of customers">
            </mat-paginator>

And this is typescript to handle the pagination. I've noticed that my currentPageIndex never gets changed from 0.

 customerList: any;
  dataSource!: MatTableDataSource<customerResponse>;
  displayedColumns: string[] = ['actions', '_id', 'companyName', 'firstName', 'lastName', 'email', 'contactNum', 'acceptedTermsAndConditions', 'subscriptions'];
  finalCustomerList: any[] = [];


 @ViewChild(MatSort) sort!: MatSort;
      @ViewChild(MatPaginator) paginator!: MatPaginator;
      pageSizeOptions: number[] = [1, 2, 3, 4, 5]; //options per page
      limit: number = 4;
      offset: number = 0;
      totalCustomers = 0; 
      filterValue = '';
      customerId: string | undefined;
      currentPageIndex: number = 0;


  getCustomers() {
    //get a list of all the customers
    this.customersService.getCustomers(this.offset, this.limit).subscribe({
      next: (resp: customerResponse) => {
        //clear the list so that when a new page size is selected the records are not concatenated 
        //to the previous information in the table
        this.finalCustomerList = [];
        // Clear the filter value when fetching new data
        this.filterValue = '';
       
        this.customerList = resp.data;
        this.totalCustomers = this.offset + this.customerList.length;
        this.paginator.length = this.totalCustomers;


        // //loop through each customer in the list
        this.customerList.forEach((customer: any) => {
          const planList: string[] = [];

          //   //check if the customer has any subscriptions
          if (customer.subscriptions.length > 0) {

            //     //the customer may have one or more subscriptions
            //     //for each subscription get the name of the plan and add it to an array
            customer.subscriptions.forEach((sub: any) => {
              this.planService.getSubscriptionByID(sub).subscribe({
                next: (resp: any) => {
                  planList.push(resp.payload.plan.name);
                }
              })

            })
          }

          // //add the customer details and their plan to the same record an array
          this.finalCustomerList.push({ customer: customer, subscriptions: planList });
        });

        this.dataSource.data = this.finalCustomerList; // Set the data after finalCustomerList is populated
        this.dataSource.paginator = this.paginator; // Assign the paginator reference after data is set
        this.filterCustomerList();
      },
      error: (err) => {
        console.log("Customer error", err);
      }
    })
  }