mat-step content vanishes when animating - mat-horizontal-stepper

Noticed some weird behavior when using Material Stepper combined with container animations.

if you click a step, while the mat-stepper is animating, the content of the step goes invisible.

HTML:

<strong> reload - while the stepper is fading in - spam click step 2 </strong>.

<mat-horizontal-stepper [@fadeAnimation]>
    <mat-step>
        <p>STEP ONE CONTENT</p>
    </mat-step>
    <mat-step>
        <p>STEP TWO CONTENT</p>
    </mat-step>
    <mat-step>
        <p>STEP THREE CONTENT</p>
    </mat-step>
</mat-horizontal-stepper>

Animation:

function fadeAnimation() {
  return trigger('fadeAnimation', [
    state('void', style({})),
    state('*', style({})),
    transition(':enter', [
      style({ opacity: 0 }),
      animate('1s ease-in-out', style({ opacity: 1 }))
    ]),
    transition(':leave', [
      style({ opacity: 1 }),
      animate('1s ease-in-out', style({ opacity: 0 }))
    ])
  ]);
}

Stackblitz Example

is there a possible workaround for this ? (other than [@.disabled] of course, the animation is still wanted.)

from mat-step content vanishes when animating - mat-horizontal-stepper