Angular Reactive Forms, не могу вывести чекбоксы, которые формируются из входящих данных

Есть форма с фильтрами. Форму создаю через FormBuilder. Со статичными данными проблем нет, а вот с приходящими данными не могу совладать. Мне нужно отрисовать группу чекбоксов в airlines, аналогично с transferFilter. При помощи pathValue я изменяю значение поля на обработанные данные, выходит 10 элементов. В

{{filtersForm.value|json}}

даныые выводятся и изменяются, ну вот чекбоксы не появляются. Не хочется разбивать форму на отдельные сущности, но если ответа не найду, придется переделывать.

Метод для формирования группы чекбоксов:

private mapToCheckboxArrayGroup(data: string[], display): FormArray {
    return this.fb.array(
      data.map((val, i) => {
        return this.fb.group({
          value: val,
          display: display[i],
          selected: false,
        });
      })
    );
  }

Создаю группу:

filtersForm: FormGroup = this.fb.group({
    sort: [this.priceSortItems[0].attribute],
    transferFilter: this.mapToCheckboxArrayGroup(
      this.availableTransferValue,
      this.availableTransferDisplay
    ),
    minCost: [null],
    maxCost: [null],
    airlines: [null],
  });

Получаю данные, обрабатываю их и формирую с помощью метода группу:

private refresh$ = new Subject();

carriers$ = this.refresh$.pipe(
    startWith(true),
    switchMap(() => this.dataService.getCarriers()),
    map((e) => {
      const keys = [...Object.keys(e)];
      const values = [...Object.values(e)];
      const airItems = this.mapToCheckboxArrayGroup(keys, values);
      return airItems;
    }),
    shareReplay(1)
  );

Реагирую на изменения в форме:

filterData$ = this.refresh$.pipe(
    startWith(this.filtersForm.value),
    switchMap(() => this.filtersForm.valueChanges),
    map((e) => {
      console.log(e);
      console.log(this.filtersForm.controls);
    }),
    shareReplay(1)
  );

Подписываюсь на обновление данных и через PathValue меняю значение группы airlines на formarray из метода:

ngOnInit(): void {

    this.carriers$.pipe(takeUntil(this.destroy$)).subscribe((e) => {
      this.filtersForm.patchValue({
        airlines: e.value,
      });
    });
}

Отдаю в template массив с даными через getter:

get carrierFilterArray() {
    const carriers = this.filtersForm.get('airlines') as FormArray;
    console.log(carriers.value);
    return carriers;
  }

Форма HTML:

<form *ngIf="filtersForm.value" [formGroup]="filtersForm" class="page__menu menu-page">
    <div class="menu-page__sort" *ngIf='priceSortItems'>
      <h3 class="menu-title">Сортировать</h3>
      <div class="menu-page__sort items" *ngFor="let elem of priceSortItems; let i = index">
        <input formControlName="sort" [value]="elem.attribute" type="radio" [id]="elem.value" /><label
          [for]="elem.value"> {{ elem.display }}</label><br />
      </div>

      <div class="menu-page__filter" formArrayName="transferFilter">
        <h3 class="menu-title">Фильтровать</h3>
        <div class="menu-page__filter items" *ngFor="let elem of transferFilterArray.controls; let i = index"
          [formGroup]="elem">
          <input type="checkbox" [formControl]="elem.get('selected')" [value]="elem.get('value').value"
            [id]="elem.get('value').value" />
          <label [for]="elem.get('value').value"> {{ elem.get('display').value }}</label><br />
        </div>
      </div>

      <div class="menu-page__price">
        <h3 class="menu-title">Цена</h3>
        <p>
          От
          <input formControlName="minCost" type="text" />
        </p>
        <p>До <input formControlName="maxCost" type="text" /></p>
      </div>

      <div class="menu-page__airlines" formArrayName="airlines">
        <h3 class="menu-title">Авиакомпании</h3>
        <div class="menu-page__filter items" *ngFor="let elem of carrierFilterArray.controls; let i = index"
          [formGroup]="elem">
          <input type="checkbox" [formControl]="elem.get('selected')" [value]="elem.get('value').value"
            [id]="elem.get('value').value" />
          <label [for]="elem.get('value').value"> {{ elem.get('display').value }}</label><br />
        </div>
      </div>
      <pre>{{filtersForm.value|json}}</pre>
    </div>
  </form>

В итоге получаю все фильтры нормальные, кроме последнего. Ниже виден json form.value, в которм есть все данные, чекбоксы должны отрендериться перед json

Понимаю, что нужно сделать асинхронно, но не пойму, как... Проект учебный, сначала я его сделал на чистом JS, хочу теперь добить на Angular. Буду очень благодарен за наводку.