I have a problem when trying to create a nested table in Angular using devextreme, and there is not much information about it, how can I make a datagrid nested in another, here is my example which does not work, does anyone know how to solve it?
TS:

employees = [
    { ID: '001', FirstName: 'John', LastName: 'Doe', Position: 'Manager', State: 'California', BirthDate: new Date('1980-04-10').toLocaleDateString() },
    { ID: '002', FirstName: 'Jane', LastName: 'Smith', Position: 'Developer', State: 'Texas', BirthDate: new Date('1985-08-15').toLocaleDateString() }
  ];
  tasks = [
    { ID: '1001', EmployeeID: '001', Description: 'Prepare monthly report', DueDate: new Date('2024-06-01').toLocaleDateString() },
    { ID: '1002', EmployeeID: '002', Description: 'Develop new feature', DueDate: new Date('2024-06-15').toLocaleDateString() }
  ];

  getTasks(employeeID: string) {
    return this.tasks.filter(task => task.EmployeeID === employeeID);
  }

HTML:

<dx-data-grid
  id="gridContainer"
  [dataSource]="employees"
  keyExpr="ID"
  [showBorders]="true"
  [columns]="['FirstName', 'LastName', 'Position', 'State', 'BirthDate']"
  [masterDetail]="{
    enabled: true,
    template: 'detailTemplate'
  }">
</dx-data-grid>

<ng-template #detailTemplate let-detailData>
  <dx-data-grid
    [dataSource]="getTasks(detailData.ID)"
    keyExpr="ID"
    [showBorders]="true"
    [columns]="['Description', 'DueDate']">
  </dx-data-grid>
</ng-template>

my package.JSON:

{
  "name": "vtransporte_practicas",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.3.0",
    "@angular/cdk": "^17.3.8",
    "@angular/common": "^17.3.0",
    "@angular/compiler": "^17.3.0",
    "@angular/core": "^17.3.0",
    "@angular/forms": "^17.3.0",
    "@angular/material": "^17.3.8",
    "@angular/platform-browser": "^17.3.0",
    "@angular/platform-browser-dynamic": "^17.3.0",
    "@angular/router": "^17.3.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "bootstrap": "^5.3.3",
    "bootstrap-icons": "^1.11.3",
    "devextreme": "23.2.4",
    "devextreme-angular": "23.2.4",
    "devextreme-schematics": "^1.6.7",
    "ngx-bootstrap": "^12.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.4",
    "@angular/cli": "^17.3.4",
    "@angular/compiler-cli": "^17.3.0",
    "@types/jasmine": "~5.1.0",
    "devextreme-cli": "latest",
    "devextreme-themebuilder": "23.2.4",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }
}

its looks like:
error nested datagrid
the final result should be something like this:
good nested datagrid
I have searched the devextreme forums but only hjay nested datagrid of examples in react and I asked CHATGPT4 and it didn’t solve it either