Overriding input value of tui-multi-select

[JJaloudi]

Hi guys, trying to use the tui-multi-select component, when the user enters a value into the input section to search for a new select option, the selected value is appearing as [Object object], which is fine, however, trying to get it to display as the specified key/value pair hasn't gone as planned.

Here is the html content:

<tui-multi-select
  placeholder="Select an MCC"
  formControlName="benchmarkMCCs"
  [(search)]="searchStr"
  [valueContent]="mccListContent"
>
  MCC Benchmarks
  <tui-data-list-wrapper
    *tuiDataList
    tuiMultiSelectGroup
    [items]="filteredItems()"
    [itemContent]="mccTemplate"
  ></tui-data-list-wrapper>
</tui-multi-select>

<ng-template #mccListContent let-list>
  <ng-container *ngFor="let item of list">
    <tui-tag
      [removable]="true"
      [value]="item.value"
    ></tui-tag>
  </ng-container>
</ng-template>

On the ts side:

  filteredItems = () =>
    (!this.searchStr || this.searchStr!.length < 2) ? [] :
      this.mccs.filter((mcc) => mcc.value.toLowerCase().includes(this.searchStr!.toLowerCase()));

This is what happens when the user goes to search for a new value with an item selected:

The mccs object is a simple {key: string|number, value: string}[] - Obviously this is an issue with the fact that the formControl itself is selecting the entire object, however, do you guys provide any in-suite solution for a case like this?