Таблица материалов Angular: сортировка не работает при использовании других полей, кроме описания

Я пытаюсь отсортировать таблицы отпусков. В то время как мое описание поля работает, когда я пытаюсь отсортировать другие поля, такие как leave_type, leave_from, leave_to, оно не работает. Ниже приведен мой код для файлов .html и .ts.

оставить-form.html

<table mat-table [dataSource] = "leaveData" style = "width: 100%" matSort>
          <ng-container  matColumnDef = "sn"><input matInput  placeholder = "Filter">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> SN. </th>
            <td mat-cell *matCellDef = "let element; let i = index;"> {{i+1+(pageSize*pageIndex)}} </td>
          </ng-container>
          <ng-container  matColumnDef = "leaveType">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Leave Type </th>
            <td mat-cell *matCellDef= "let element" > {{element.leave_type}} </td>
          </ng-container>

          <ng-container matColumnDef = "description">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
            <td mat-cell *matCellDef= "let element"> {{element.description}} </td>
          </ng-container>

           <ng-container matColumnDef = "leaveFrom">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> Leave From </th>
              <td mat-cell *matCellDef= "let element"> {{element.start_date | date: 'MM dd, y' : 'UTC'}} </td>
          </ng-container>

          <ng-container matColumnDef = "leaveTo">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Leave To </th>
            <td mat-cell *matCellDef= "let element"> {{element.end_date | date: 'MM dd, y' : 'UTC'}} </td>
          </ng-container>

          <ng-container matColumnDef = "appliedOn">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Applied Date </th>
            <td mat-cell *matCellDef= "let element"> {{element.created_at | date: 'MM dd, y' : 'UTC'}} </td>
          </ng-container>

          <ng-container  matColumnDef = "leaveStatus">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Leave Status </th>
            <td mat-cell *matCellDef= "let element"> {{element.leave_status}} </td>
          </ng-container>

          <tr mat-header-row  *matHeaderRowDef = "displayedColumns"></tr>
          <tr mat-row *matRowDef = "let row; columns: displayedColumns; let element;"></tr>
        </table>

оставить-form.ts

 getLeaveData() { 
    this.leaveApi.getUserLeave()
      .subscribe((data: []) => {
        console.info(data);
        this.leaveData = new MatTableDataSource(data);
        this.leaveData.paginator = this.paginator;
        this.leaveData.sort = this.sort;
      });
  }