mat-expansion-panel 'closed' event is called with random index instead of 'destroyed'

Question

I am using mat-expansion-panel inside cdk-virtual-scroll. I want to hit a function when the panel is destroyed after scrolling, but the (closed) event is called instead of the (destroyed) event, having a random index as a parameter.

<mat-accordion>
  <cdk-virtual-scroll-viewport itemSize="50" [minBufferPx]="700" [maxBufferPx]="1000" scrollWindow>
    <mat-expansion-panel *cdkVirtualFor="let item of items;  let i = index;" 
    (opened)="panelOpened(i)"
    (closed)="panelClosed(i)"
    (destroyed)="panelDestroyed(item.status, i)" 
    [(expanded)]="item.status">
      <mat-expansion-panel-header>
        <mat-label>
          <mat-label> {{item.id}} </mat-label>
          <mat-label> isOpened: {{item.status}}</mat-label>
        </mat-label>
      </mat-expansion-panel-header>
      <div>
        <div>{{item.detail}}</div>
        <div>
          <button mat-raised-button color="accent">OK</button>
        </div>
      </div>
    </mat-expansion-panel>
  </cdk-virtual-scroll-viewport>
</mat-accordion>

You can test the scenario here

Steps to recreate the issue:

• open console
• open any expansion panel (let's say item5)
• scroll down till opened panel is destroyed.
• the console will show a Closed 'random index number' message instead of Destroyed 5.

I do not want to use templateCacheSize: 0, it causes slow item rendering on scrolling.