Angular Gridster 2, nested Grids

Question

I am facing an issue with angular gridster 2, I want to have nested gridster, Here is the configs I am using

zItemsNesteing: IGridsterConfig = {
    gridsterConfig: this.gridsterOptions,
    gridsterItems: [
      {
        x: 0,
        y: 0,
        rows: 2,
        cols: 2,
        zItems: {
          gridsterConfig: this.gridsterOptions,
          gridsterItems: [
            { x: 0, y: 0, rows: 2, cols: 2},
            { x: 2, y: 0, rows: 1, cols: 1 },
          ],
        },
      },
      { x: 0, y: 0, rows: 2, cols: 2 },
    ],
  };`enter code here`

Here is my component

<div class="gridster-container">
    <app-grid
      [options]="zItemsNesteing.gridsterConfig"
      [dashboard]="zItemsNesteing.gridsterItems"
    ></app-grid>
  </div>

and here I am trying nesting

<gridster [options]="options">
  <gridster-item [item]="item" *ngFor="let item of dashboard">
    Hello
    <div class="gridster-container" *ngIf="item.zItems">
      <app-grid
        [options]="item.zItems.gridsterConfig"
        [dashboard]="item.zItems.gridsterItems"
      ></app-grid>
    </div>
  </gridster-item>
</gridster>

This is my output, nested gridster seems not working.

If you see in nested gridster we have two items but it is comming one after another instead of on the same row and the specified colummn.