IonDateTime - two components showing same value

Ionic Framework Ionic React
1

I want to use IonDateTime to update the expirationDate and executionDate of a transaction. I create one code to be reused. But when using it on one page, the 2nd call of the component is displaying the same value as the 1st call of the component though the value of the field value of the 2nd component is different. I added several console logs to confirm the values and sure enough, the values in the props are correct but the 2nd call still displays the first value through they have different keys too.

For example, when formData.executionDate = 2024-04-25 and formData.expirationDate = 2024-04-26, both IonDateTime show 2025-04-25. Thinking it was a timezone issue, I changed the formData.executionDate to a completely different date (i.e. 2024-04-24) and both show 2024-04-24.

Is it a bug or am I missing something? See the code below… specifically DatePicker.

          <IonItem>
            <DatePicker
              key={`executionDate-${transaction.id}`}
              label="Execution Date"
              value={formData.executionDate}
              onDateChange={handleDateChange}
              fieldName="executionDate"
            />
          </IonItem>
          <IonItem>
            <DatePicker
              key={`expirationDate-${transaction.id}`}
              label="Expiration Date"
              value={formData.expirationDate}
              onDateChange={handleDateChange}
              fieldName="expirationDate"
            />
          </IonItem>

import React, { useEffect, useState } from "react";
import {
  IonDatetimeButton,
  IonModal,
  IonDatetime,
} from "@ionic/react";
import { DatePickerProps } from "../../types/types-DatePicker";
import { isWeekday } from "@shared/utils/date";
import "./DatePicker.css";

export const DatePicker: React.FC<DatePickerProps> = ({
  label,
  value,
  onDateChange,
  fieldName,
}) => {
  const [isFocused, setIsFocused] = useState(false);
  const [uniqueKey, setUniqueKey] = useState(0);

  useEffect(() => {
    setUniqueKey(Math.random());
  }, []);

  return (
    <>
      <label
        htmlFor="date"
        className={`custom-datetime-label ${
          isFocused || value ? "floating" : ""
        }`}
      >
        {label}
      </label>

      <IonDatetimeButton
        key={`${fieldName}-button-${value}-${uniqueKey}`}
        datetime="date"
        className="custom-datetime-button"
        onFocus={() => setIsFocused(true)}
        onBlur={() => setIsFocused(false)}
      />
      <IonModal keepContentsMounted={true}>
        <IonDatetime
          key={`${fieldName}-datetime-${value}-${uniqueKey}`}
          id="date"
          className="custom-ion-datetime"
          slot="content"
          presentation="date"
          name="date"
          value={value}
          showDefaultTitle={true}
          showDefaultButtons={true}
          isDateEnabled={isWeekday}
          doneText="Save"
          cancelText="Cancel"
          onIonChange={(e) => onDateChange(e, fieldName)}
        >
          <span slot="title">Select {label}</span>
        </IonDatetime>
      </IonModal>
    </>
  );
};