I'm implementing an mdbAutoCompeter and have issues with the setValue.

The control initialised the following way in the TS file:

this.form = new FormGroup({
      itemid: new FormControl('', [Validators.required])
}

The initial value is set with the setValue method in the TS file:

  this.form.controls.itemid.setValue({item});

Item is a object(array) like this:

let item = [{
    Id: RESTapi.Id,
    Name: RESTapi.Name
}]

The onDisplayFunction looks like this:

 onDisplayItemValue(selectedValue: IItem) {
    this.item = selectedValue;
    return selectedValue.Name;
}

The HTML file has the control configured like this:

<input formControlName="item" type="text" class="completer-input form-control form-control-sm mdb-autocomplete" (ngModelChange)="retrieveItems($event)" [mdbAutoCompleter]="item" placeholder="Select the item" />
    <mdb-auto-completer name="itemlist" #item="mdbAutoCompleter" textNoResults="No items found" [displayValue]="onDisplayItemValue">
    <mdb-option *ngFor="let item of items | async" [value]="item">{{ item.Id }} | {{ item.Name }}</mdb-option>
</mdb-auto-completer>
<label for="itemid" class="active">Sire</label>

Expected behavior

The setValue method will initialise the starting value and displays the item.Name.

Actual behavior

The control show [Object} instead of item.Name

Resources (screenshots, code snippets etc.)

See in the background above.