Angular материал - автозаполнение - фильтрация результатов по группам

Question

Я пытаюсь создать простой выпадающий список, используя автозаполнение материала, и я застрял. У меня есть несколько проблем здесь:

1. Когда я выбираю опцию, я вижу ее идентификатор, и вместо этого мне нужно увидеть имя. Идентификатор используется в отправителе событий и в бэкэнде - я пытался использовать [displayWith], но внутри функции я по-прежнему получаю только идентификатор, а не весь объект, который я могу отобразить после.
2. Я хотел бы иметь возможность фильтровать результаты, но у меня есть группы, которые могут не иметь идентификатора или имени, но, может быть, есть способ фильтрации только с использованием значений параметра mat?

My JSON выглядит так:

[
  {
    "id": "",
    "name": "",
    "tableItems": [
      {
        "id": 1,
        "name": "John"
      },
      {
        "id": 2,
        "name": "Paul"
      },
      {
        "id": 3,
        "name": "Mary"
      }
    ]
  },
  {
    "id": "",
    "name": "",
    "tableItems": [
      {
        "id": 10,
        "name": "Brian"
      },
      {
        "id": 20,
        "name": "Joseph"
      },
      {
        "id": 30,
        "name": "Luke"
      }
    ]
  }
]

Мой HTML компонент выглядит следующим образом:

<mat-form-field>
  <mat-label>Results</mat-label>
  <input
    matInput
    placeholder="Type to filter results"
    type="text"
    [formControl]="control"
    [matAutocomplete]="auto"
    spellcheck="false"
  >
</mat-form-field>

<mat-autocomplete #auto="matAutocomplete">
    <mat-optgroup
      *ngFor="let group of groups"
      [label]="group.name"
      [class.mat-optgroup-no-label]="!group.name"
    >
      <mat-option
        *ngFor="let option of group.tableItems;"
        [value]="option.id"
      >
        {{ option.name }}
      </mat-option>
    </mat-optgroup>
</mat-autocomplete>

Любая помощь приветствуется.

Редактировать:

Точка 1 была решена. Я не передал весь объект в [value], но мне все еще нужна помощь с фильтрацией.