mat-stepper next button not works if selectedIndex is used

Question

I'm using angular mat-stepper. In my example I have 3 steps and I want to set second step selected. I'm using selectedIndex attribute.

Here is my code

<mat-stepper linear #stepper [selectedIndex]="selectedIndex">

  <mat-step [stepControl]="firstFormGroup" >
    <form [formGroup]="firstFormGroup">
      ...
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup" >
    <form [formGroup]="secondFormGroup">
      ...
    </form>
  </mat-step>
  <mat-step>
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>
  </mat-step>

</mat-stepper>

The selected step is showing but the problem is that next button is not works on step 2. When I click on next button, nothing is happen. If I go to prevoius step then click next button, it starts to work. Why next button is not works in step 2?. How can I fix it ?

Stackblitz example