Angular MatTableDataSource filterPredicate не обновляет таблицу после обновления фильтра

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { Coach } from "../../shared/models/User";
import { ManagementService } from "../../shared/services/management.service";
import { Router } from '@angular/router';
import { UtilsService } from 'src/app/shared/services/utils.service';
import * as moment from 'moment';
import swal from 'sweetalert2';
import { FormControl } from '@angular/forms';
import { MatTableDataSource } from '@angular/material/table';

@Component({
    selector: 'app-coaches',
    templateUrl: './coaches.component.html',
    styleUrls: ['./coaches.component.css']
})
export class CoachesComponent implements OnInit, AfterViewInit {
    dataSource;
    columnsToDisplay = ['username', 'email', 'actions'];
    coachList: Array<Coach> = [];
    username
    usernameFilter = new FormControl('');

    constructor(
        private managementService: ManagementService,
        private router: Router,
        private utils: UtilsService
    ) {
        this.dataSource = new MatTableDataSource();
        this.dataSource.filterPredicate = this.createFilter();
    }
    async ngAfterViewInit() {
        // await this.initializePage();
    }

    ngOnInit() {
        this.initializePage();

        this.usernameFilter.valueChanges
            .subscribe(
                username => {
                    this.username = username;
                    this.dataSource.filter = this.username;
                    console.info(this.dataSource.filter)
                }
            )
    }

    createFilter(): (data: Coach, filter: string) => boolean {
        let filterFunction = function (data, filter): boolean {
            return data.username.toLowerCase().indexOf(filter.toLowerCase()) !== -1
        }
        return filterFunction;
    }

    async initializePage() {
        let coaches: Array<Coach> = await this.managementService.getCoaches();
        this.coachList = coaches.sort(
            (prev, next) => {
                return moment(prev.createdAt).isBefore(moment(next.createdAt)) ? 1 : -1;
            }
        );
        this.dataSource = this.coachList
    }
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class = "main-content zero_margin">
  <div class = "container-fluid">
    <div class = "row">
      <div class = "col-md-12">
        <div class = "card">
          <div class = "card-header card-header-primary card-header-icon">
            <div class = "card-icon">
              <i class = "material-icons">account_circle</i>
            </div>
            <h4 class = "card-title">Coaches</h4>
          </div>
          <div class = "card-body">
            <div class = "toolbar">
              <button mat-raised-button class = "btn btn-primary" (click) = "registerCoach()">Register</button>
              <div class = "col-lg-3 col-md-6 col-sm-4 add-select" style = "float: right;">
                <mat-form-field appearance = "standard">
                  <mat-label>Filter</mat-label>
                  <input matInput [formControl] = "usernameFilter" placeholder = "username" #input>
                </mat-form-field>
              </div>
            </div>
            <div style = "text-align: center" *ngIf = "coachList.length === 0">
              <br>
              <div style = "font-style: italic; color: gray">.:: No Registered Coaches ::.</div>
            </div>
            <table mat-table [dataSource] = "dataSource" class = "table table-striped table-no-bordered table-hover"
              cellspacing = "0" width = "100%" style = "width:100%">
              <ng-container matColumnDef = "username">
                <th mat-header-cell *matHeaderCellDef> Username </th>
                <td mat-cell *matCellDef = "let row"> {{row.username}} </td>
              </ng-container>
              <ng-container matColumnDef = "email">
                <th mat-header-cell *matHeaderCellDef> Email </th>
                <td mat-cell *matCellDef = "let row"> {{row.email}} </td>
              </ng-container>
              <ng-container matColumnDef = "actions">
                <th mat-header-cell *matHeaderCellDef> Actions </th>
                <td mat-cell *matCellDef = "let row">
                  <app-button-delete (onClick) = "deleteCoach(coach.id)"></app-button-delete>
                </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef = "columnsToDisplay"></tr>
              <tr mat-row *matRowDef = "let row; columns: columnsToDisplay;"></tr>
            </table>
            <mat-paginator showFirstLastButtons [pageSizeOptions] = "[10, 25, 50, 100]"></mat-paginator>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>