Mat Autocomplete not working as expected

[R S]

nytime I select an option from Material Autocomplete, it also makes the GET call to the server again for more results. The expected result should just be populating the input.

Everything else works fine. The only issue the unexpected extra call to the server when the autocomplete option is selected.

The results are retrieved dynamically from the server.

HTML:

<form class="example-form">

    <mat-form-field class="example-full-width">

      <input type="text" placeholder="search item" aria-label="Item1" matInput [formControl]="searchTerm" [matAutocomplete]="auto1">

      <mat-autocomplete #auto1="matAutocomplete" [displayWith]="displayFn">

        <mat-option *ngFor="let item of searchResult" [value]="item.Id">

          {{ item.Name }}

        </mat-option>

      </mat-autocomplete>

    </mat-form-field>

  </form>

TS:

searchTerm : FormControl = new FormControl();

    searchResult = [];

    constructor(private service: AppService){

      this.searchTerm.valueChanges

          .debounceTime(400) 

          .subscribe(data => {

              this.service.search_word(data).subscribe(response =>{

                  this.searchResult = response

              })

I realize that I'm using valueChanges and that when an option is selected, the value is changed. However, I don't know another autocomplete lib that works like that.

Is there a work around for this?

I should note that I'm using the DisplayWith feature so that it displays the item.Name but the value is item.Id

Any help is really appreciated!