How to set initial date in react-datepicker with Formik?

Question

I get my date and time as string in UTC (2021-12-24T18:30:00+00:00) and try to set it as initial date for DatePicker. The issue is that I get string in UTC instead of specified format initialy. After I change value manually everything is good.

Setting initial values:

<Formik
  initialValues={{
    startLocation: rideDetails.startLocation,
    endLocation: rideDetails.endLocation,
    startDateAndTime: rideDetails.startDateAndTime,
    car: rideDetails.car,
    availableSeats: rideDetails.availableSeats,
    price: rideDetails.price,
  }}
  ...

My component:

export const DateTimePicker = ({
  label,
  placeholder,
  labelclass,
  inputclass,
  errorclass,
  ...props
}) => {
  const { getFieldProps, getFieldMeta, setFieldValue } = useFormikContext();
  const field = getFieldProps(props);
  const meta = getFieldMeta(props);
  return (
    <>
      <label className={labelclass} htmlFor={props.id || props.name}>
        {label}
      </label>
      <DatePicker
        locale="pl"
        timeFormat="HH:mm"
        dateFormat="dd/MM/yyyy HH:mm"
        placeholderText={placeholder}
        showTimeSelect
        className={inputclass}
        {...field}
        {...props}
        selected={(field.value && new Date(field.value)) || null}
        onChange={(date) => {
          setFieldValue(field.name, date);
        }}
      />
      {meta.touched && meta.error ? (
        <div className={errorclass}>{meta.error}</div>
      ) : null}
    </>
  );
};

what I get

what I want

Answer 1

Okay, I solved this by setting my date in state as Date object instead of string.

setRideDetails({
  startLocation: rideDetails.startFrom,
  endLocation: rideDetails.endIn,
  startDateAndTime: rideDetails.startTime,
  car: rideDetails.car.id,
  availableSeats: rideDetails.numberOfSeats,
  price: rideDetails.price,
});

--->

setRideDetails({
  startLocation: rideDetails.startFrom,
  endLocation: rideDetails.endIn,
  startDateAndTime: new Date(rideDetails.startTime),
  car: rideDetails.car.id,
  availableSeats: rideDetails.numberOfSeats,
  price: rideDetails.price,
});