Mat pagination not working properly, data in the mat-table is not getting updates.only the first 5 records are being displayed

Question

The requirement is to use Mat-table,Mat-Pagination and the form group is different for each row, dont want to use the custom function to implement pagination, want to use MatTableDataSource('Took the reference from https://material.angular.io/components/table/overview')

HTML FILE of the component.

<form [formGroup]="tableFormGroup">
 <div class="div">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- Table columns -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let row; let rowIndex = index">
      <ng-container [formGroup]="getFormGroup(rowIndex)">
        <input matInput formControlName="name" [readonly]="true" />
      </ng-container>
    </td>
  </ng-container>

  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef>Age</th>
    <td mat-cell *matCellDef="let row; let rowIndex = index">
      <ng-container [formGroup]="getFormGroup(rowIndex)">
        <input matInput formControlName="age" [readonly]="true" />
      </ng-container>
    </td>
  </ng-container>

  <!-- Table rows -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr
    mat-row
    *matRowDef="let row; let rowIndex = index; columns: displayedColumns"
  ></tr>
</table>

<mat-paginator
  [length]="dataSource.data.length"
  [pageSize]="pageSize"
  [pageSizeOptions]="pageSizeOptions"
  showFirstLastButtons
></mat-paginator>
</div>
</form>

TS FILE of the component

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator, PageEvent } from '@angular/material/paginator';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
 tableFormGroup: FormGroup;
 dataSource: MatTableDataSource<any>;
 displayedColumns: string[] = ['name', 'age']; // Columns to be displayed in the table

 pageSize = 5; // Number of items per page
 pageSizeOptions: number[] = [5, 10, 25]; // Page size options

 @ViewChild(MatPaginator) paginator!: MatPaginator;

 constructor(private formBuilder: FormBuilder) {
   this.tableFormGroup = this.formBuilder.group({});
   this.dataSource = new MatTableDataSource<any>();
 }

 ngOnInit() {
   this.dataSource.data = [
     { name: 'John', age: 1 },
     { name: 'Jane', age: 2 },
     { name: 'Mike', age: 3 },
     { name: 'John', age: 4 },
     { name: 'Jane', age: 5 },
     { name: 'Mike', age: 6 },
     { name: 'John', age: 7 },
     { name: 'Jane', age: 8 },
     { name: 'Mike', age: 9 },
     { name: 'John', age: 10 },
     { name: 'Jane', age: 11 },
     { name: 'Mike', age: 12 },
     { name: 'John', age: 13 },
     { name: 'Jane', age: 14 },
     { name: 'Mike', age: 15 },
     { name: 'John', age: 16 },
     { name: 'Jane', age: 17 },
     { name: 'Mike', age: 18 },
     // Add more data objects as needed
   ];

   // Initialize the form controls within the tableFormGroup based on your data source
   this.dataSource.data.forEach((data, index) => {
     const rowFormGroup = this.formBuilder.group({
       name: [data.name],
       age: [data.age],
       // Add more form controls as needed
     });
     this.tableFormGroup.addControl(`row${index}`, rowFormGroup);
   });
 }

 ngAfterViewInit() {
   this.dataSource.paginator = this.paginator;
 }

 getFormGroup(rowIndex: number): FormGroup {
   return this.tableFormGroup.get(`row${rowIndex}`) as FormGroup;
 }
}