"mat-option"に"mat-tree"をリスト表示したい

現在 Angular Material を使用して、ファイルをアップロードするためのUIを作っています。

このコードを参考に

この様なUIを作りました。
引っ張ってきているデータはこの様になっています。

/** Example file/folder data. */
export const files = [
  {
    name: 'components',
    type: 'folder',
    date: '11/21/2020',
    kind: 'folder',
    size: '--',
    children: [
      {
        name: 'src',
        type: 'folder',
        date: '11/21/2020',
        kind: 'folder',
        size: '--',
        children: [
          {
            name: 'cdk',
            type: 'folder',
            date: '11/21/2020',
            kind: 'folder',
            size: '--',
            children: [
              { name: 'package.json', type: 'file', date:'11/21/2020',kind: 'json', size: '2MB' },
              { name: 'BUILD.bazel', type: 'file', date: '11/21/2020', kind: 'bazel', size: '2MB' },
            ]
          },
          { name: 'material', type: 'folder', date: '11/21/2020', kind: 'folder', size: '--' }
        ]
      }
    ]
  },
  {
    name: 'angular',
    type: 'folder',
    date: '11/21/2020',
    kind: 'folder',
    size: '--',
    children: [
      {
        name: 'packages',
        type: 'folder',
        date: '11/21/2020',
        kind: 'folder',
        size: '--',
        children: [
          { name: '.travis.yml', type: 'file', date: '11/21/2020', kind: 'yml', size: '2MB' },
          { name: 'firebase.json', type: 'file', date: '11/21/2020', kind: 'json', size: '2MB' }
        ]
      },
      { name: 'package.json', type: 'file', date: '11/21/2020', kind: 'json', size: '--' }
    ]
  },
  {
    name: 'angularjs',
    type: 'folder',
    date: '11/21/2020',
    kind: 'folder',
    size: '--',
    children: [
      { name: 'gulpfile.js', type: 'file', date: '11/21/2020', kind: 'js', size: '2MB' },
      { name: 'README.md', type: 'file', date: '11/21/2020', kind: 'md', size: '2MB' }
    ]
  }
];

Uploadボタンをクリックしたときに開くダイアログで

ファイルの保存先を指定するために　mat-select/ mat-option を使用しているのですが、**全てのフォルダ名を表示するにはどのようにしたらよいのでしょうか。
**

今のところ、ダイアログないのコードはこんな感じです

<mat-form-field>
    <mat-label>Drirectry Name</mat-label>
    <mat-select name="fileName" [(value)]="selectedCountry" placeholder="Country">
    <!-- Should {file.name} be used -->
      <mat-option *ngFor="let file of file" [value]="file.name">
        {{file.name}}
      </mat-option>
    </mat-select>
</mat-form-field>

調べてみると、mat-optgroupが使えそうだなとかは考えたのですが、結局できませんでした。
よろしければ、ご教授お願いします。