mat-tab(s) containing mat-accordion(s)

I have the following structure:

<mat-tab-group>
    <mat-tab>
        <component-1>
    <mat-tab>
        <component-2>

Each component-1 and component-2 has a mat-accordion:

<mat-accordion multi="true">
    <mat-expansion-panel *ngFor="let item of items; let i = index" 
        [expanded]="expandedItems.includes(i)">

Now, initially when I am in tab 1, the panels are collapsed. Then I expand one panel. Next I go to tab 2. The panels in tab 2 are initially collapsed. Then I expand one panel.

Then I go back to tab 1. I see that the panel collapsed. This cannot be because I am checking if expandedItems include this panel. I am sure that the expandedItems includes this panel because I use the same check on styling my mat-expansion-panel-header. I put a specific style on the header when the panel is in expandedItems.

Also, same thing happens when I go back to tab 2. The panel is also collapsed.

Why the panel collapsed even if I expanded it initially. The content height becomes 0 and visibility becomes hidden. This though happens only once. After seeing those panels collapsed, I click on the panel. But it didn't move from being collapsed. It is as if it was expanded but it really was collapsed. So I click on the header again and it expanded. Then succeeding change from one tab to another, the panels stay expanded, which is my expected behavior.

from mat-tab(s) containing mat-accordion(s)