Отображение массива в Angular Дерево материалов - Angular 9

Question

Я пытаюсь отобразить структуру массива для создания древовидной структуры, используя Material Tree Library - MatTreeFlatDataSource.

У меня возникли проблемы с методом buildFileTree(), чтобы вернуть правильный узел, чтобы отобразить выходные данные, как ожидалось.

Мне нужно поддерживать id в структуре tree/json, чтобы я мог легко отслеживать (в конечном итоге сохранять в базе данных), когда новый объект добавляется в объект JSON.

Array / Json структура:

const TREE_DATA = [
  {
    id: 1, 
    item: 'section-a',
    children: [
      {
        id: 2,
        item: 'sub-section-a'
      }
    ]
  },
  {
    id: 3,
    item: 'section-b',
    children: [
      {
        id: 4,
        item: 'sub-section-b'
      },
      {
        id: 5,
        item: 'sub-section-b2',
        children: [{
          id: 6,
          item: 'sub-subsection-b2'
        }]
      }
    ]
  }
];

Ожидаемый результат:

 - section-a
     - sub-section-a
 - section-b
     - sub-section-b
     - sub-section-b2
         - sub-subsection-b2

и т. Д. *

пример ссылки: https://stackblitz.com/edit/angular-lxgeqn

Детализация проекта:

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.2
@angular-devkit/build-angular     0.900.2
@angular-devkit/build-optimizer   0.900.2
@angular-devkit/build-webpack     0.900.2
@angular-devkit/core              9.0.2
@angular-devkit/schematics        9.0.2
@angular/cdk                      9.0.0
@angular/cli                      9.0.2
@angular/material                 9.0.0
@ngtools/webpack                  9.0.2
@schematics/angular               9.0.2
@schematics/update                0.900.2
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Любая обратная связь / решение приветствуется.