Create filter with searchbar field

Initial part of my application consists of loading data from the database and displaying it using mat-accordion, as below:

async getVouchers() {
this._HttpService.get(${ServerUrl.ApiUrl}voucher).then(data => {
this.result = data;

  if (this.result.vouchers.length > 0) {
    this.hasVoucher = true;
    this.dataSource = this.result.vouchers;
  }
  else {
    this.hasVoucher = false;
  }

  this.skeleton = true;
})

}

  <div class="ion-margin-top ion-margin-bottom" *ngFor="let data of dataSource">
      <mat-accordion>
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>
              {{ data.name }}
            </mat-panel-title>
          </mat-expansion-panel-header>

          <p>{{'voucher.messageTable' | transloco}} {{data.message}}</p>
          
          ....
          </mat-expansion-panel>
      </mat-accordion>
    </div>

This part work pretty well.

I am working to create a filter but not working.

<ion-searchbar show-clear-button=“always” placeholder=“Search” (keyup)=“filterVoucher($event)”>

filterVoucher(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
}

Anyone can give some help to finish this filter??w