Ionic sheet modal auto-height with modalController

Question

I'm using Ionic Vue for a Vue 3 Ionic app and I'm implementing a 'Sheet Modal'. With the Ionic examples and my test code I can get the auto height to work perfectly when using the inline modal in the Vue template.

Code demo (CodeSandbox)

<template>
  <ion-header>
    <ion-toolbar>
      <ion-title>App</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <ion-button id="open-modal" expand="block">Open Sheet Modal</ion-button>

    <ion-modal trigger="open-modal" :initial-breakpoint="1" :breakpoints="[0, 1]">
      <div class="block">Block of Content</div>
    </ion-modal>
  </ion-content>
</template>

<script lang="ts">
import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    IonButton,
    IonModal,
    IonHeader,
    IonContent,
    IonToolbar,
    IonTitle,
 },
});
</script>

<style>
.block {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

ion-modal {
  --height: auto;
}
</style>

So this works as expected but HOW do I get the same behavior when using the modelController to dynamically create the sheet modal? The only thing I can do is set the breakpoints but those are not auto-height adjusting based on the viewport size.

const openSheet = async () => {
  const modal = await modalController.create({
    component: SheetModal,
    componentProps: { record: props.record },
    cssClass: 'modal-auto-height',
    breakpoints: [0, .1],
    initialBreakpoint: .1
  });
  modal.present();

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

SheetModal.vue

<template>
  <IonContent class="ion-padding">
    <IonList lines="none">
      <IonItem>
        <IonLabel class="ion-padding-start">Record #1</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel class="ion-padding-start">Record #2</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel class="ion-padding-start">Record #2</IonLabel>
      </IonItem>
    </IonList>
  </IonContent>
</template>

<script setup lang="ts">
import { IonContent, IonItem, IonLabel, IonList } from "@ionic/vue";
</script>

<style scoped>
ion-modal {
  --height: auto;
}
</style>