Why does my mat-paginator display incorrectly and there is no scrolling of pages if the table is out of bounds

Question

here is my code html:

    <table mat-table [dataSource]="data">
        <ng-container matColumnDef="Audit_ID">
            <th mat-header-cell *matHeaderCellDef>Audit_ID</th>
            <td mat-cell *matCellDef="let element">{{element.Audit_ID}}</td>
        </ng-container>

        <ng-container matColumnDef="Audit_DateTime">
            <th mat-header-cell *matHeaderCellDef>Audit_DateTime</th>
            <td mat-cell *matCellDef="let element">{{element.Audit_DateTime}}</td>
        </ng-container>
        <ng-container matColumnDef="Audit_Login">
            <th mat-header-cell *matHeaderCellDef>Audit_Login</th>
            <td mat-cell *matCellDef="let element">{{element.Audit_Login}}</td>
        </ng-container>
        <ng-container matColumnDef="Audit_IP_Address">
            <th mat-header-cell *matHeaderCellDef>Audit_IP_Address</th>
            <td mat-cell *matCellDef="let element">{{element.Audit_IP_Address}}</td>
        </ng-container>
        <ng-container matColumnDef="Audit_Result">
            <th mat-header-cell *matHeaderCellDef>Audit_Result</th>
            <td mat-cell *matCellDef="let element">{{element.Audit_Result}}</td>
        </ng-container>
        <ng-container matColumnDef="Audit_SerialNumber">
            <th mat-header-cell *matHeaderCellDef>Audit_SerialNumber</th>
            <td mat-cell *matCellDef="let element">{{element.Audit_SerialNumber}}</td>
        </ng-container>
        <ng-container matColumnDef="Audit_Comments">
            <th mat-header-cell *matHeaderCellDef>Audit_Comments</th>
            <td mat-cell *matCellDef="let element">{{element.Audit_Comments}}</td>
        </ng-container>
        <ng-container matColumnDef="Audit_OrgID">
            <th mat-header-cell *matHeaderCellDef>Audit_OrgID</th>
            <td mat-cell *matCellDef="let element">{{element.Audit_OrgID}}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
        <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
    </table>
    <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons>

    </mat-paginator>
    </div>

the code and everything else works fine, except for the visualization itself, when I click on the button for how many lines to display, the screen is below:

how do i fix this?enter image description here

here you can see it yourself component.ts , but everything seems to work here:

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { audit, map } from 'rxjs';
import { AdminService, Audit } from '../../services/admin.service';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';


@Component({
  selector: 'app-admin-dashboards',
  templateUrl: './admin-dashboards.component.html',
  styleUrls: ['./admin-dashboards.component.css']
})

export class AdminDashboardsComponent implements OnInit {
  http: any;
  data = new MatTableDataSource<Audit>()
  response: any;
  
  @ViewChild(MatPaginator, {static: false}) paginator!: MatPaginator;
  


  OnBoardButton:boolean=false;
  OnBoard:boolean=false;


  columnsToDisplay =[ 'Audit_ID',
                      'Audit_DateTime',
                      'Audit_Login',
                      'Audit_IP_Address',
                      'Audit_Result',
                      'Audit_SerialNumber',
                      'Audit_Comments' ,
                      'Audit_OrgID'];
  constructor(private router: Router, private adminService: AdminService) { }
  ngOnInit(): void {
  }

  getDataAudit(){
    this.adminService.getAudit().subscribe(response => {
      this.data = new MatTableDataSource<Audit>(response);
      this.data.paginator = this.paginator;
      

    })
    this.OnBoard = true
  }
  
  showButtonsBoard(){
    this.OnBoardButton = true
    return
  }

}