Can an ion-virtual-scroll used inside side menu

Ionic Framework
1

I tried changing ion list to virtual scroll for side menu items but when I initially open the side menu it shows overlapping items or sometimes a blank white screen, it only shows the expected result when I resize the window.

Is there any way possible to implement this correctly?

<ion-app>
  <ion-split-pane>
    <ion-menu type="overlay">
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-virtual-scroll [items]="items">
          <ion-menu-toggle auto-hide="false" *virtualItem="let p">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-virtual-scroll>
       <!-- <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list> -->
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
    for (let i = 0; i < 10; i++) {
      this.items.push({
        title: i,
        url: '/list',
        icon: 'list'
      });
    }
  }

Sample screenshot:
2hgGYDQ7ZC