Ion-datetime stuck on an infinite scoll

Ionic Framework
1

I am using the ion-datetime inside an ionic modal. I have a service named util which has a method that uses ModalController to create a modal for the datetime component which has the ion-datetime in it.

util.service.ts

  constructor(
    private mc: ModalController
  ) { }
  async selectDate( title: string="Select Date" ){
    let m = await this.mc.create({
      component : DnDateSelectorComponent,
      componentProps : {
        title
      },
      cssClass : 'small-modal'
    })
    await m.present()
    let {data} = await m.onDidDismiss()
    return data;
  }

dn-date-selector.component.html

<ion-datetime size="cover" presentation="date" [(ngModel)]="selectedDate">
  <span slot="title">{{title}}</span>
</ion-datetime>
<ion-footer>
  <ion-toolbar>
    <ion-button color="secondary" slot="end" class="ion-margin-end" (click)="confirm()">
      Done
    </ion-button>
  </ion-toolbar>
</ion-footer>

dn-date-selector.component.ts

  constructor(
    private mdc: ModalController
  ) { }

  @Input() title: string = "Select Date"
  @Input() selectedDate : string = ''

  ngOnInit() {}

  confirm(){
    this.selectedDate = this.selectedDate.split('T')[0] || ""
    this.mdc.dismiss(this.selectedDate, 'datetime-confirm');
  }

This is what happens when utilService selectDate is called.

error