Use multiple cdk-virtual-scroll-viewport in the same page

Question

cdk-virtual-scroll-viewport is not working properly when I use more than two cdk-virtual-scroll-viewport in the same page.

Stackblitz example

In the above example, first dropdown is working properly. but in the second dropdown, getting blank space after scrolling the dropdown and open the dropdown again. enter image description here

    <mat-select [formControl]="multiSelectControl"  (openedChange)="openChange($event)"
        placeholder="Select">
        <cdk-virtual-scroll-viewport itemSize="50" [style.height.px]=5*48 >
            <mat-option *cdkVirtualFor="let topping of toppingList" [value]="topping"
                >{{topping.viewValue}}</mat-option>
        </cdk-virtual-scroll-viewport>
    </mat-select>
</mat-form-field>

<br>
<br>

<mat-form-field>
<mat-select [formControl]="multiSelectControl1"  (openedChange)="openChange1($event)"
    placeholder="Select">
    <cdk-virtual-scroll-viewport itemSize="50" [style.height.px]=5*48 minBufferPx="200" maxBufferPx="400">
        <mat-option *cdkVirtualFor="let topping of toppingList1" [value]="topping"
            >{{topping.viewValue}}</mat-option>
    </cdk-virtual-scroll-viewport>
</mat-select>
</mat-form-field>

export class AppComponent {

  toppingList: any[] = [];
  toppingList1: any[] = [];

  @ViewChild(CdkVirtualScrollViewport, { static: true })
  cdkVirtualScrollViewPort: CdkVirtualScrollViewport;

  @ViewChild(CdkVirtualScrollViewport, { static: true })
  cdkVirtualScrollViewPort1: CdkVirtualScrollViewport;

  multiSelectControl = new FormControl();
  multiSelectControl1 = new FormControl();

  constructor(private cd: ChangeDetectorRef, readonly sd: ScrollDispatcher) {
    for (let i = 0; i < 100000; i++) {
      this.toppingList.push({ id: i, viewValue: "option-" + i });
      this.toppingList1.push({ id: i, viewValue: "option-" + i });
    }
  }

  openChange($event: boolean) {
    if ($event) {
      this.cdkVirtualScrollViewPort.scrollToIndex(0);
      this.cdkVirtualScrollViewPort.checkViewportSize();
    }
  }

  openChange1($event: boolean) {
    if ($event) {
      this.cdkVirtualScrollViewPort1.scrollToIndex(0);
      this.cdkVirtualScrollViewPort1.checkViewportSize();
      
    }
  }


}

this.cdkVirtualScrollViewPort1.scrollToIndex(0); scrolling to a particular index of second dropdown is also not working.

Any suggestions would be much appreciated!