My filter in mat-table does not search. Where is the bug?

Question

I have a problem that my filter does not filter the table. I get data from a JSON object. So this is no static data. Do you have an idea what the problem is?

My work: https://stackblitz.com/edit/angular-mat-table-with-api-call-zwects?file=app%2Ftable-basic-example.html

My Code:

// HTML
<div class="filter-header">
                  <mat-form-field class="filter-input">
                    <label>
                      <input matInput #filter (keyup)="applyFilter($event.target.value)" placeholder="Durchsuchen" />
                    </label>
                    <button mat-icon-button matSuffix aria-label="clear" *ngIf="filter.value" (click)="filter.value=''; applyFilter('');">
                      <mat-icon class="filter-remove"><i class="fa fa-trash" id="remove-icon" matTooltip="Löschen"></i></mat-icon>
                    </button>
                  </mat-form-field>
                </div>

// TS
  public dataSource: MatTableDataSource<UserAdministration> = null;
  @ViewChild('filter', {static: true}) filter: ElementRef;

  public displayedColumns: string[] = ['gender', 'firstname', 'lastname', 'functions'];

// Filter
  public applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.dataSource.filter = filterValue;
  }

json

0: {userId: 1, gender: "test1", firstname: "test2", lastname: "test3", username: "test4",…}
admin: true
email: "[email protected]"
firstname: "test2"
gender: "test1"
lastname: "test3"
mandantAdmin: true
userId: 1
username: "test4"