Scrolling flickers with cdk-virtual-scroll-viewport

Question

Scrolling works well when I iterate over an array of numbers like this:

        this.items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);

Working html Code is:

<cdk-virtual-scroll-viewport style="height: 500px;width: 100%" #scrollViewport (scrolledIndexChange)="onScrollIndexChange($event)"
                         [itemSize]="50">
<div style="height: 50px;width: 100%" *cdkVirtualFor="let row of items;templateCacheSize: 0,let rowIndex=index">
    {{row}}
</div>

But the scrolling flickers when I iterate over an array of my model rows. The row model is like this:

  class RMLTableRow {
  id: string | number;
  isSelectedRow?: boolean;
  data: {};
}

An example of the array is:

this.items = [ {
    "id": "f717efbd-450b-465f-85a5-f5f793e3223f",
    "isSelectedRow": false,
    "data": {
      "rowItem": {...},  // this contains the entire row object.
      "Model Name Tooltip": "Redirects to model versions page",
      "latestProductionVersionTooltipKey": ""
    }
  },
...
]

Output of the scrolledIndexChange is:

1
2
3
4
2
3
2
3
2
3
2

versions used:

"@angular/cli": "^11.2.15",
"@angular/cdk": "^11.2.13",

Is the size of the item in items array the reason for the flickering?

Update

Actually scrolling flickers the following code also when the length is around 100

this.items = Array.from({length: 100000}).map((_, i) => Item #${i});