multiple ion-datetime-button and ion-datetime created dynamically inside v-for

I am trying to create multiple instances of ion-datetimeButton and ion-datetime dynamically inside the v-for with ion-buttons

<ion-item v-for="(task, index) in alltasks">
 <ion-datetime-button datetime="datetime_{{ index }}"></ion-datetime-button>
 <ion-modal :keep-contents-mounted="true">
    <ion-datetime id="datetime_{{ index }}" ref="datetimeRef" presentation="date-time" :value="functionToGetTimeForThisTask()" preferWheel="true">
            <ion-buttons slot="buttons">
                <ion-button color="danger" @click="cancel()">Cancel</ion-button>
                <ion-button color="primary" @click="confirm()">Done</ion-button>

The issue I am having that all the instances are showing same date and time even I am returning the different date time with functionToGetTimeForThisTask function for each instance and the other issue is that how can I handle cancel and confirm buttons for each instance. The cancel and confirm buttons does not work in the above code.

DId you ever get an answer to this? Stuck with all additonal datetime pickers on the screen show the same time as the first.