Angular Material table sorting not working from 2nd page

Question

I am using angular material table, and I am grabbing data individually for each page, so 50 rows for page 1 for example. The sorting works in the first page with no issues, however, from 2nd page onwards, if I click sort in any column, all the rows disappear, or more specifically, the matNoDataRow row is shown, which appears if there is no data.

Is the fact that I am grabbing data individually for each page a factor to why sorting is not working from 2nd page onwards?

below are the HTML code details:

<div class="mat-elevation-z8">
    <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
    <table mat-table [dataSource]="dataSource" matSort>

        <!-- Title Column -->
        <ng-container matColumnDef="title">
            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by title">
                {{'createevent.clone.eventitle' | translate}}</th>
            <td mat-cell *matCellDef="let element" class="max-w-prose truncate pr-2" [matTooltip]="element.title"> <span
                    class="mobile-label mr-15">{{'createevent.clone.eventitle' | translate}}: </span>
                <span>{{element.title}}</span>
            </td>
        </ng-container>

        <!-- Location Column -->
        <ng-container matColumnDef="fullLocation">
            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by location">
                {{'createevent.clone.location' | translate}} </th>
            <td mat-cell *matCellDef="let element" class="max-w-prose truncate pr-2"
                [matTooltip]="element.fullLocation">
                <span class="mobile-label mr-15">{{'createevent.clone.location' | translate}}: </span>
                <span>{{element.fullLocation}}</span>
            </td>
        </ng-container>

        <!-- Date Created Column -->
        <ng-container matColumnDef="createdDate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by Date Created">
                {{'createevent.clone.datecreated' | translate}} </th>
            <td mat-cell *matCellDef="let element"> <span class="mobile-label mr-15">{{'createevent.clone.datecreated' |
                    translate}}: </span> <span>{{element.createdDate | date: 'dd/MM/yyyy'}}</span> </td>
        </ng-container>

        <!-- Start Date Column -->
        <ng-container matColumnDef="startDate">
            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by Start Date">
                {{'createevent.clone.startdate' | translate}} </th>
            <td mat-cell *matCellDef="let element"> <span class="mobile-label mr-15">{{'createevent.clone.startdate' |
                    translate}}: </span> <span>{{element.startDate | date: 'dd/MM/yyyy'}}</span> </td>
        </ng-container>

        <!-- Button Column -->
        <ng-container matColumnDef="action">
            <th mat-header-cell *matHeaderCellDef> Action </th>
            <td mat-cell *matCellDef="let row"> <button mat-button type="button" color="primary"
                    (click)="cloneEvent(row.id)">
                    <mat-icon>content_copy</mat-icon> <span
                        class="hidden tablet:inline-block">{{'createevent.clone.button' |
                        translate}}</span>
                </button> </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

        <!-- Row shown when there is no matching data. -->
        <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell" *ngIf="!isLoading" colspan="4">No data matching the filter "{{searchInput.value}}"</td>
        </tr>
    </table>

    <mat-paginator #paginator [pageSize]="[query.pageSize]" [pageSizeOptions]="[5, 10, 25, 50]"
        [pageIndex]="query.pageNumber - 1" (page)="updateTable($event)" showFirstLastButtons aria-label="Event List">
    </mat-paginator>
</div>

Values I initialized:

query: EventSearchQuery = {
  organizerId: 0,
  eventVersion: 2,
  searchText: '',
  pageSize: 5,
  pageNumber: 1
};

@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
displayedColumns: string[] = ['title', 'fullLocation', 'createdDate', 'startDate', 'action'];
dataSource = new MatTableDataSource();

Below are the Typescript code details:

getEvents() {
  this.isLoading = true;

  // get all organizer events and initialize table
  this.newEventService.getOrganizerEvents(this.query).subscribe(res => {
    // map location name to fullLocation for easier data manipulation
    const events = res.map((event) => {
      const fullLocation = event.location.name;
      return { ...event, fullLocation };
    })

    //initialize table headers
    this.dataSource = new MatTableDataSource<any>(events);

    //initialize pagination
    setTimeout(() => {
      this.paginator.pageIndex = this.query.pageNumber - 1;
      this.paginator.pageSize = this.query.pageSize;
      this.paginator.length = this.filteredEventsCount;
    });
    this.dataSource.paginator = this.paginator;

    // initialize sorting
    this.dataSource.sort = this.sort;

    // filters title and location
    this.dataSource.filterPredicate = (data: OrganizersEvent, filter: string) => {

      return (data.title.trim().toLowerCase().indexOf(filter) !== -1 ||
        data.fullLocation.trim().toLowerCase().indexOf(filter) !== -1);
    };
    this.isLoading = false;
  }, error => {
    console.log(error);
    this.isLoading = false;
  })
}

updateTable(event ?: PageEvent) {
  this.query.pageNumber = event.pageIndex + 1;
  this.query.pageSize = event.pageSize;
  this.getEvents();
  return event;
}