why communication between nodes in ej2 DiagramComponent may not be established?

I'm trying to create a connection between nodes using a datamanager But when I specify connectionDataSource, the nodes disappear and the screen is empty, there are no errors in the console

@Component({
  selector: 'app-relationship-playground-component',
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [layout]='layout' [dataSourceSettings]='dataSourceSettings' [getNodeDefaults]='nodeDefaults' [getConnectorDefaults]='connectorDefaults'>
  </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})
export class RelationshipPlaygroundComponentComponent implements OnInit{
  @ViewChild("diagram") public layout?: LayoutModel;
  public dataSourceSettings?: DataSourceModel;

  public connections : Object[] =  [
    {
      id: "a96b708d-9878-409b-9424-79afd536fbcb",
      source: "e0ad8a67-65a4-488e-a13e-af4a51095da4",
      target: "991d0d06-f084-43df-871d-2c501a41108e",
    }
  ]

  public elements : Object[] = [
    {
      caption: "Accom (sample)",
      id: "e0ad8a67-65a4-488e-a13e-af4a51095da4",
      recordId: "405947d0-2ffb-4ded-8675-0475f19f5a81",
    },
    {

      caption: "Our company",
      id: "991d0d06-f084-43df-871d-2c501a41108e",
      recordId: "e308b781-3c5b-4ecb-89ef-5c1ed4da488e",
    }
  ]

  public nodeDefaults(node: NodeModel): NodeModel {
    return node;
  }

  public connectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.type = "Orthogonal";
    connector.cornerRadius = 7;
    return connector;
  }
  ngOnInit(): void {
    this.layout = {
      type: "HierarchicalTree", verticalSpacing: 40
    };
    this.dataSourceSettings = {
      id: "id",
      dataManager: new DataManager(this.elements as JSON[]),
      connectionDataSource: {
        id: 'id',
        sourceID: 'source',
        targetID: 'target',
        dataManager: new DataManager(this.connections as JSON[])
      }
    };
  }
}

I took examples from the documentation and the sample repository https://github.com/syncfusion/ej2-samples/blob/master/src/diagram/crud.ts

https://ej2.syncfusion.com/angular/documentation/diagram/data-binding#how-to-perform-editing-at-runtime

A Hierarchical Tree layout using DataManager has been rendered. In DataManager, you need to assign a JSON object with Id and parentId, and this DataManager is then assigned to the dataSource property in dataSourceSettings. The layout is rendered based on the ID and parentId defined in the layout. When rendering the layout, there is no need to set a connectionDataSource.

Documentation https://ej2.syncfusion.com/angular/documentation/diagram/automatic-layout

Sample https://stackblitz.com/edit/angular-dzj1jr-87pxp8?file=src%2Fapp.component.html