I am using ionic 6 for ion-datetime with property multiple="true". I want to make sure that user cannot select more than 2 dates. and if user selects the 3rd date then i want to remove the oldest date automatically rather throwing a validation error. The code is like below:

  <ion-datetime presentation="date" multiple="true" preferWheel="false" [(ngModel)]="packageEstimatedDated" (ionChange)="validateDates()"></ion-datetime>

for .ts

packageEstimatedDated
async validateDates(){
    console.log("selected dates length:", this.packageEstimatedDated.length)
    
    if(this.packageEstimatedDated.length === 3){
      console.log("after remove extra date", this.packageEstimatedDated)
      this.packageEstimatedDated.splice(0,1)
      console.log("after removed", this.packageEstimatedDated)
    }
  }

The problem is that even the splice is removing the element but it still not really. Here is the output i see when i select 4 dates one by one:

selected dates length: 1
new-order.page.ts:61 selected dates length: 2
new-order.page.ts:61 selected dates length: 3
new-order.page.ts:72 after remove extra date (3) ['2022-08-10', '2022-08-18', '2022-08-23']
new-order.page.ts:74 after removed (2) ['2022-08-18', '2022-08-23']
new-order.page.ts:61 selected dates length: 4