Таблица материалов Angular — как отобразить вложенные данные

У меня есть ответ REST API от URL-адреса, например:

{
  "list": [
    {
      "id": 1,
      "login": "[email protected]",
      "first_name": "AK",
      "phone": "967777777777"
    },
    {
      "id": 2,
      "login": "[email protected]",
      "first_name": "QR",
      "phone": "967777777777"
    },
    {
      "id": 3,
      "login": "[email protected]",
      "first_name": "JM",
      "phone": "967777777777"
    }
  ],
  "count": 3,
  "success": true
}

и я создал 2 интерфейса для этого API, например:

import { List } from "./list"

export interface Users {
    list: List[]
    count: number
    success: boolean
}

export interface List {
    id: number
    first_name: string
    login: string
    phone: string
}

и я создал службу для получения данных из URL-адреса API следующим образом:

getUsers(): Observable<Users[]>{
    //myHeader = myHeader.set('id', '123456');
    return this.http.get<Users[]>(`https://api.users.com/user/list`).pipe(
      tap(users => console.info(users)),
    );
}

и я назвал эту службу в своем component.ts следующим образом:

export class UsersComponent implements OnInit{
  displayedColumns: string[] = ['id', 'first_name', 'login', 'phone'];
  users: any[] = [];

  constructor(private usersService: UsersService){ }

  ngOnInit(): void {
    this.onGetUsers();
  }

  onGetUsers(): void{
    this.usersService.getUsers().subscribe(
      (response => {
        this.users = new MatTableDataSource<Users>(response);
      })
    );
  }
}

и просмотрите эти данные в таблице материалов следующим образом:

<table mat-table [dataSource] = "users" class = "mat-elevation-z8">
  
     Position Column 
    <ng-container matColumnDef = "id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef = "let element"> {{element.id}} </td>
    </ng-container>

    <ng-container matColumnDef = "first_name">
      <th mat-header-cell *matHeaderCellDef> first_name </th>
      <td mat-cell *matCellDef = "let element"> {{element.first_name}} </td>
    </ng-container>
  
    <ng-container matColumnDef = "login">
      <th mat-header-cell *matHeaderCellDef> login </th>
      <td mat-cell *matCellDef = "let element"> {{element.login}} </td>
    </ng-container>
  
    <ng-container matColumnDef = "phone">
      <th mat-header-cell *matHeaderCellDef> phone </th>
      <td mat-cell *matCellDef = "let element"> {{element.phone}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef = "displayedColumns"></tr>
    <tr mat-row *matRowDef = "let row; columns: displayedColumns;"></tr>
</table>

Но в таблице нет данных. Как я могу решить эту проблему?