`mat-pager` shows always all element instead of just one page

Question

I am trying to use ma-table with mat-paginator but my mat-paginator is always showing all elements no matter what the size of page I choose. I have tried to move paginator to the table element but that did not help at all What am I doing wrong?

HTML:

    <div class="container">
        <mat-form-field appearance="outline">
            <mat-label>Filter</mat-label>
            <input matInput (keyup)="onApplyFilter($event.target, input)" placeholder="Search columns"
                #input>
        </mat-form-field>
    </div>

    <mat-table #table [dataSource]="dataSource" matSort>
        <ng-container matColumnDef="firstName">
            <mat-header-cell *matHeaderCellDef mat-sort-header> First Name </mat-header-cell>
            <mat-cell *matCellDef="let account">{{account.firstName}}
            </mat-cell>
        </ng-container>
        <ng-container matColumnDef="secondName">
            <mat-header-cell *matHeaderCellDef mat-sort-header> Second Name </mat-header-cell>
            <mat-cell *matCellDef="let account">{{account.lastName}}
            </mat-cell>
        </ng-container>
        <ng-container matColumnDef="email">
            <mat-header-cell *matHeaderCellDef mat-sort-header> E-mail </mat-header-cell>
            <mat-cell *matCellDef="let account">{{account.email}}
            </mat-cell>
        </ng-container>
        <ng-container matColumnDef="action">
            <mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
            <mat-cell *matCellDef="let i = index; let account; let row">
                <button class="btn btn-sm btn-danger btn-delete-account" type="button"
                    (click)="onDeleteUser($event, row, account)" [ngClass]="{ 'disabled': row.deleting}">
                    <span *ngIf="row.deleting" class="spinner-border spinner-border-sm mr-1"></span> Delete
                </button>
            </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{hovered: row.hovered}"
            (mouseover)="row.hovered = true" (mouseout)="row.hovered = false" #tr
            (click)="onRowSelected(row, tr)">
        </mat-row>
    </mat-table>

    <mat-paginator *ngIf="!isLoadingAccounts" #paginator [length]="accounts.length" [pageSize]="10"  [pageSizeOptions]="[5, 10, 30, 50]"
        showFirstLastButtons>
    </mat-paginator>
</div>



    export class GenerateSchedulesComponent implements OnInit, AfterViewInit {
      @ViewChild('paginator') paginator: MatPaginator;
      @ViewChild(MatSort) sort: MatSort;
...
ngAfterViewInit(): void {
        this.accountService.getAll()
              .pipe(first())
              .subscribe({
                next: (accounts: Account[]) => {
                  this.accounts = accounts;
                  this.dataSource = new MatTableDataSource(this.accounts);
                  this.dataSource.paginator = this.paginator;
                  this.dataSource.sort = this.sort;
                },
                complete: () => {
                  
                  this.isLoadingAccounts = false;
                },
                error: error => {
                  
                  this.isLoadingAccounts = false;
                }
              });
}