Сортировка данных не может быть применена ко всем полям таблицы

Question

У меня проблема с angular материал. Сортировка по датам. Я сделал все правильно, но я не знаю, почему я вижу стрелку на своем шаблоне (сортировки), но когда я щелкаю по заголовку моего столбца, я обнаружил, что таблица не сортируется (работает только одно поле 'CIN')!

Мой шаблон:

<div class="content-card">
            <mat-table [dataSource]="listdata" matSort class="products-table" [@animateStagger]="{value:'50'}"
                fusePerfectScrollbar>

                <!-- ID Column -->
                <ng-container matColumnDef="Nfamille">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>Nom de famille</mat-header-cell>
                    <mat-cell *matCellDef="let element">
                        <p class="text-truncate">{{element.FirstName}}</p>
                    </mat-cell>
                </ng-container>

                <!-- Category Column -->
                <ng-container matColumnDef="Prenom">
                    <mat-header-cell *matHeaderCellDef fxHide mat-sort-header fxShow.gt-md>Prénom</mat-header-cell>
                    <mat-cell *matCellDef="let element" fxHide fxShow.gt-md>
                        <p class="category text-truncate">
                            {{element.LastName}}
                        </p>
                    </mat-cell>
                </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky:true" class="Scolling_wigh"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;" class="product" matRipple class="Scolling_wigh"></mat-row>


            </mat-table>
            <mat-paginator #paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5"></mat-paginator>

        </div>

Мой компонент:

listdata: MatTableDataSource<any>;  
@ViewChild(MatSort, { static: true }) sort: MatSort;

  @ViewChild(MatPaginator,null) paginator: MatPaginator;
constructor(private _fuseTranslationLoaderService: FuseTranslationLoaderService,
    private service: GetionChauffeursService, private dialog: MatDialog,private snackBar: MatSnackBar) { this._fuseTranslationLoaderService.loadTranslations(english, turkish); }
  ngOnInit() {

    this.service.getDriverMAnnager().subscribe((data: any[])=>{
       this.driverList = json2array(data) ;
       this.resultDrivers =  this.driverList ;
      this.listDriverElementEntity = this.resultDrivers[0].ListDriverElement;
      this.listdata = new MatTableDataSource(this.listDriverElementEntity);
      this.listdata.sort = this.sort;
      this.listdata.paginator = this.paginator;
});

здесь пример использования данных c: https://stackblitz.com/edit/angular-2wd9x1