Date Picker Type error: TypeError: Cannot read properties of undefined (reading 'options')

Hi all,

I have a angular ionic application (Capacitor) and have the following date picker:

  <ion-item>
    <ion-label>Date</ion-label>
    <ion-input
      value="{{ date | date: 'dd-MMM-yyyy' }}"
      id="date"
      class="ion-text-end"
      readonly="true"
    ></ion-input>
    <ion-popover trigger="date" size="cover">
      <ng-template>
        <ion-datetime [showDefaultButtons]="true"
                      #popoverDatetime
                      presentation="date" value="{{date}}"
                      (ionChange)="date = popoverDatetime.value;">
        </ion-datetime>
      </ng-template>
    </ion-popover>
  </ion-item>

now whenever I click the date picker to open it I get the following error logs:

TypeError: Cannot read properties of undefined (reading 'options')
  at PickerColumnCmp.refresh @ http://localhost/node_modules_ionic_core_dist_esm_ion-datetime_3_entry_js.js:2934:24
  at PickerColumnCmp.componentDidLoad @ http://localhost/node_modules_ionic_core_dist_esm_ion-datetime_3_entry_js.js:2686:10
  at safeCall @ http://localhost/vendor.js:21810:30
  at postUpdateComponent @ http://localhost/vendor.js:21730:7
  at postUpdate @ http://localhost/vendor.js:21660:32
  at push.3279._ZoneDelegate.invoke @ http://localhost/polyfills.js:422:30
  at push.3279.Zone.run @ http://localhost/polyfills.js:182:47
  at <anonymous> @ http://localhost/polyfills.js:1339:38
  at push.3279._ZoneDelegate.invokeTask @ http://localhost/polyfills.js:456:35
  at push.3279.Zone.runTask @ http://localhost/polyfills.js:227:51
TypeError: Cannot read properties of undefined (reading 'align') <error: unable to serialize object>
TypeError: Cannot read properties of undefined (reading 'align')
at PickerColumnCmp.render @ http://localhost/node_modules_ionic_core_dist_esm_ion-datetime_3_entry_js.js:2974:38
at callRender @ http://localhost/vendor.js:21681:44
at <anonymous> @ http://localhost/vendor.js:21644:7
at Generator.next @ <anonymous>
at asyncGeneratorStep @ http://localhost/vendor.js:200079:24
at _next @ http://localhost/vendor.js:200101:9
at <anonymous> @ http://localhost/vendor.js:200108:7
at new ZoneAwarePromise @ http://localhost/polyfills.js:1364:25
at <anonymous> @ http://localhost/vendor.js:200097:12
at updateComponent @ http://localhost/vendor.js:21675:17

this is in my live environment and my logs are flooded with them, wondering if anyone can help me out here.

Thanks