Hello, I got some issues setting default values in the Datetimepicker. I get my datetime from the database in a format like this 2023-08-29T03:00:00+02:00. For my form I use react hook form. Now when filling the form (update form) with data from the database I ran into issues with the datetimepicker.

My React Component looks like this

export const RHFDateTimePicker = ({fieldName, rrules, inputLabel, inputToggle, disabled}) => {
const {control, formState: {errors}} = useFormContext();
return (
    <Controller
    control={control}
    name={fieldName}
    rules={rrules}
    render={({
        field: {onChange, value, ref}
    }) => (
        <>
            <MDBDateTimepicker datepickerOptions={{ format: 'dd.mm.yyyy' }} timepickerOptions={{ format: '24h' }} label={inputLabel} inputRef={ref}
                invalidLabel={"Passe deine Eingabe an!"} inputToggle={inputToggle} disabled={disabled}

                defaultTime={(!value || value === "") ? "" : moment(value).format("HH:mm")}
                defaultDate={(!value || value === "") ? "" : moment(value).format("DD.MM.YYYY")}
                onChange={(v)=> {
                    console.log("Value of Datetimepicker:", value)
                    console.log("Value of v in this onChange method:", v)
                    onChange(moment(v, "DD.MM.YYYY, HH:mm").format())
                }}
            />
            {errors?.[fieldName] &&
            <span className="input-error">
                {errors?.[fieldName]?.message}
            </span>}
        </>
    )}
/>
)

}

It works like this, there is an value variable where the datetime is stored like this 2023-08-29T03:00:00+02:00 and for time and date it gets formated with the javascript library "moment". If the value gets changed it calls the onChange method and I get a string like "29.08.2023, 05:00". I parse the string with moment - Library and set the value with the onChange method form ReactHookForm. This works just fine.

But I want the database value. So I call the setValue("") - method from reacthookform and set the value of the Datetimepicker.

Expected behavior The Expected behavior would be the Date and Time is shown correctly.

Actual behavior What actually happens is the time is the value form the database and the date gets magically overwritten to the date of the present day. The onchange function of Datetimepicker is called and the value I get is the wrong date with the right time.

I also daded some console.log

Do you have any idea?

import React, { useState, useEffect } from 'react';
import { MDBContainer, MDBCol, MDBDateTimepicker } from 'mdb-react-ui-kit';
import moment from 'moment';

export default function DatepickerPage(): JSX.Element {
  const [value, setValue] = useState('');

  // immitate data fetching
  useEffect(() => {
    setTimeout(() => {
      setValue('2023-09-29T03:00:00+02:00');
    }, 1000);
  }, []);

  return (
    <>
      {value && (
        <MDBDateTimepicker
          datepickerOptions={{ format: 'dd.mm.yyyy' }}
          timepickerOptions={{ format: '24h' }}
          defaultTime={moment(value).format('HH:mm')}
          defaultDate={moment(value).format('DD.MM.YYYY')}
        />
      )}
    </>
  );
}

// datepickerOptions={{ format: 'dd.mm.yyyy' }}
dateFormat='dd.mm.yyyy'