Mat Stepper does not go to next step when condition is met

I have 3 components, a mat-horizontal-stepper, component A and component B. Both components are called into the stepper. I want to navigate from component A to component B under the requirement that condition C is met. Condition C is implemented in a method called pay() and called in a button. pay() is a method that makes a payment and if the payment is successful , it should navigate to step 2 otherwise if payment is unsuccessful, it should remain on step 1.

Issue : when condition C is met, that is, payment is successful. I am not able to navigate to step 2.

See my code below

Component A ts file

@ViewChild(MatStepper) stepper!: MatStepper;

pay() {
 if(payment === "success"){
     this.goToNextStep()
   }
  else{
   console.warn("error")
 }

  goToNextStep() {
    console.log('Going to the next step...');
       if (this.stepper) {
      this.stepper.next();
   }
  }

Component A html file

<button (click)="pay()">
go to step 2 when payment is successful
<button>

Component B html file

payment successful

Stepper html file

<mat-horizontal-stepper #stepper [linear]="true">
 <mat-step>
 <app-component-a></app-component-a>
 </mat-step>

 <mat-step>
 <app-component-b></app-component-b>
 </mat-step>

</mat-horizontal-stepper>

Component A doesn't have access to the stepper in it's parent component. this.stepper will always be undefined.

Component A should emit an event and then you can call this.stepper.next(); from it's parent or you can add an @Input to Component A and pass the stepper as an input.