Cannot destructure property 'month' of 'parseDate(...)' as it is undefined. undefined - Ionic Date Picker

Question

I have the following datepicker:

  <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
          presentation="date"
          [(ngModel)]="date"
        ></ion-datetime>
      </ng-template>
    </ion-popover>
  </ion-item>

  async ngOnInit() {
    this.dateValue = parseISO(this.gblDbFunctions.getTimeStampMySqlFormat());
    // returns string in the format eg - 2022-04-28

  }

  get date(): any {
    return this.dateValue;
  }

  set date(value: any) {
    console.log(JSON.stringify(value));
    this.dateValue = value;
  }

As seen in the code I am trying to set todays date onInit() which populates the input correctly. However when I try to change the date and click on the input to open the picker I get the following error:

Line 2288 - Msg: TypeError: Cannot destructure property 'month' of 'parseDate(...)' as it is undefined. undefined
Line 2288 - Msg: TypeError: Cannot read properties of undefined (reading 'month') [object HTMLElement]

I am wondering how to fix this?

Thanks