Search filter for the <mat-select> component not working properly

Question

I have a mat-select in Angular Material. It contains a list of reports. I implemented a search filter using this example. My HTML code is:

<mat-form-field  appearance="fill" style="display: inline-block;">
  <mat-label style="height:auto;">Your Report</mat-label>
   <mat-select autoActiveFirstOption  [(ngModel)]="selectedReport" matNativeControl required name="something" (ngModelChange)="onReportChange()">        
    <mat-form-field>
      <input
        matInput
        placeholder="Search..."
        (keyup)="onKey($event.target)"
      />
    </mat-form-field>
      <mat-option *ngFor="let item of data" [value]="item">{{item}}</mat-option>            
  </mat-select>
</mat-form-field>

Snippet of my ts code:

 search(value: string) {
        let filter = value.toLowerCase();
        return this.data.filter((option) =>
          option.toLowerCase().startsWith(filter)
        );
      }

    onKey(eventTarget: any) {
        this.data = this.search(eventTarget.value);
      }

The search engine works. When I type on search bar the report's name, it filters the list and displays the available report(s). My problem is that if I delete the letter(s) typed on search bar, I don't get back the list with all reports. What should I do to get back the list of reports after search bar is cleared?