Not able to implement Formcontrol filter which is using rxjs

I am implementing a feature named as correlation using keywords where there will be two columns namely - Head and UploadData. The UploadData column consists of data which are uploaded in the previous page and Head column consists of the data which are present in the database. So, what should happen is : As soon as the user clicks on the Input text, the dropdown should show the Head values consisting of the first 2 characters of the UploadedData field. After that the user can enter any value and the Head list will keep on updating.

I am stuck at the beginning point. I have used startWith but I am not able to implement it dynamically so that it works only when the user clicks on the Input area and has not written anything. Because of that it is not showing the Head list from the specific row UploadedData that I have selected.

The angular code :

ngOnIt(){
        this.headList= this.formControl.valueChanges.pipe(
              debounceTime(500),
              startWith('tr'),
              filter(value => value.length >= 2),
              tap(() => this.isLoading = true),
              distinctUntilChanged(),
              switchMap(termFind => this._filter(termFind)),
              map(response => {
                this.isLoading = false;
                return this.options = response;
              })
            );
         }

private async _filter(value: string): Promise<headTypeList[]> {
    var filterValue = value.toLowerCase();
    if (filterValue == "" || filterValue == this.channelname) {
      filterValue = 'emptystring';
    }
    var result = (await this.findHeadsList(filterValue, this.data.medium));
    this.options = result['data'].headList;
    if (this.options.length == 0) {
      this.dropdownvalidation = true;
    }
    return this.options;
  }

The HTML Code:

<table mat-table [dataSource]="dataSource" style="width:100%">
      <ng-container matColumnDef="uploadedData">
        <th mat-header-cell *matHeaderCellDef><b> MISMATCH HEAD </b></th>
        <td mat-cell *matCellDef="let row" style="font-size:11px"> {{row.uploadedData}}</td>
      </ng-container>

      <ng-container matColumnDef="assignedHead">
        <th mat-header-cell *matHeaderCellDef> <b>MASTER VALUE</b> </th>

        <td mat-cell *matCellDef=" let i = index; let row; " style="font-size:11px">
          <div *ngIf='!row.isExistingCorrelation; then detected else notdetected'></div>
          <mat-form-field class="example-full-width" style="display: inline;font-weight: 900 " floatLabel="never">



            <input type="text" matTooltip="Click to search heads" placeholder="{{row.assignedHead}}" aria-label="Number"
              matInput [formControl]="formControl" [matAutocomplete]="auto">

            <mat-autocomplete #auto="matAutocomplete">
              <mat-option *ngIf="isLoading" class="is-loading">
                <mat-spinner diameter="30"></mat-spinner>
              </mat-option>
              <mat-option *ngIf='this.options.length == 0 && dropdownvalidation' disabled>No data found</mat-option>
              <mat-option *ngFor="let option of headList| async" value="{{option.headValue}}"
                style="font-size: 11px;" (onSelectionChange)="channelClickEvent(row,option)">
                {{option.assignedHead}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>


        </td>
      </ng-container>
</table>

Let me give an example what I am trying to do:

Suppose in Mismatch Head there are three rows with values - netflix, crunchyroll, AppleTV then in the Input box when I click for the first time, the first row ,i.e. netflix then all the Heads having values as ne should come up. Then if I click on the second row - all values with cr should come up.

I tried somethings but I am not able to overcome this. I tried startWith and also changing the headList directly but in that case when I write something the _filter is not working anymore. Let me know if I need to provide anymore details.

Thanks in advance.