Use of await with Modal Controller in ionic 6

Official docs example shows the await use as

return await modal.present();

and then getting the data back as

const { data } = await modal.onWillDismiss();

However, above didn't work for me, specially when getting the data back. I get error onWillDismiss' does not exist on type 'Promise<HTMLIonModalElement>'. The same happened for onDidDismiss for me.

Following works for me, I have to use await (await modal).. Am i missing something here or doing something totally wrong?

async presentModal(){    let modal = this.modalCntrl.create({                    component: CreateTestModalComponent,                    componentProps: { selectedName: this.name }, //gets passed in as the INPUT property                    keyboardClose: true,                    swipeToClose: true                  });    await (await modal).present();    const { data, role } = await (await modal).onWillDismiss(); //onDidDismiss()    if(role === "confirm"){      this.presentAlert(`Message passed back<br/><br/>${data.message}<br/><br/>Role '${role}' passed back`);    }    else{      this.presentAlert(`Cancel clicked!<br/><br/>Role '${role}' passed back`);    }  }async presentAlert(message: string){    const alert = await this.alertCntrl.create({      header: 'Alert',      message: message,      buttons: ['Ok']    });    await alert.present();  }

I would like to clarify one more thing, there is a lag in alert display. When using onWillDismiss() the alert displays much faster/earlier than onDidDismiss().

I am new to ionic 6 and learning right now, hence above questions/confusions.

Node: v14.15.5npm: v6.14.11ng: v11.2.0ionic: v6.13.1