How to implement mui Timepicker with latest 6 version with formik

I am working with MUI react Timepicker.
And I want to integrate it using Formik with validation but the issue is the values are not getting bound in the initialValues of the form.

const [initialValues, setInitialValues] = useState({
  mondayFrom: "",
  mondayTo: "",
});
const onSubmit = async (values: RegisterFormProps) => {
  console.log({values})//here not getting mondayFrom: ""
}

    <Formik initialValues={initialValues} enableReinitialize onSubmit={onSubmit}>
  {({
    values,
    errors,
    touched,
    handleSubmit,
    handleChange,
    isSubmitting,
    setFieldValue,
  }) => (
    <Form onSubmit={handleSubmit}>
      <Field name="mondayFrom">
        {(field) => (
          <TimePicker
            {...field}
            ampm={false}
            format="HH:mm"
            slotProps={{
              textField: {
                label: "Monday From",
                size: "small",
                fullWidth: true,
              },
            }}
          />
        )}
      </Field>
    </Form>
  )}
</Formik>;

Your code is almost correct, but there are two issues.

1. Destructuring field.
2. There's an open issue bug which states

> the DateTime picker doesn't set the same type of data as in the
> initialValues. DateTime picker sends an object containing a property
> which is the date time in full string format.

onChange is added to overcome that bug by overriding field's onChange property.<br>
This code, very similar to your code just apply those fixes.<br>

function App() {
const [initialValues, setInitialValues] = useState({
mondayFrom: "", mondayTo: "",
});
const onSubmit = async (values: RegisterFormProps) => {
console.log({values})//here not getting mondayFrom: ""
console.log(initialValues)
}
return (<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en">
<div style={{margin: 20, padding: 20}}>
<Formik initialValues={initialValues} onSubmit={onSubmit}>
{({
handleSubmit,values, errors, touched, handleChange, isSubmitting, setFieldValue,
}) => (<Form onSubmit={handleSubmit}>
<Field name="mondayFrom">
{({field}) => {
return (<TimePicker
ampm={false}
format="HH:mm"
slotProps={{
textField: {
label: "Monday From", size: "small", fullWidth: true,
},
}}
{...field}
onChange={(value)=> {
setInitialValues({mondayTo: initialValues.mondayTo,mondayFrom: value.toString()})
}}
/>)}
}
</Field>
</Form>)}
</Formik>
</div>
</LocalizationProvider>);
}

Update:<br>
As pointed out by Profer in comments, a better way for onChange is

onChange={(value) => setFieldValue('mondayFrom', value.format("hh:mm"))}

You should also include onChange to the TimePicker, so every time you change it, you set the new value to form values:

<Formik
 initialValues={initialValues}
 enableReinitialize
 onSubmit={onSubmit} >
   {({ handleSubmit }) => (
      <Form onSubmit={handleSubmit}>
         <Field name="mondayFrom">
            {({ field, form }) => (
               <TimePicker
                  {...field}
                  ampm={false}
                  format="HH:mm"
                  slotProps={{
                    textField: {
                      label: "Monday From",
                      size: "small",
                      fullWidth: true
                    }
                  }}
                  onChange={(value) => {
                    form.setFieldValue(field.name, value);
                  }}
                />
              )}
         </Field>
      </Form>
   )}
</Formik>

Here´s a code sample link.

* i'm using dayjs as dateadapter in the example.

Gist

The problem here is, that the component that you are using (TimePicker), behaves a bit differently than other components.

Formik and onChange handler

Formik, as you may know, makes it easier to develop forms in react. It does this, maintaing internal state of all input components, and by calling onChange handler whenever user enters input in the input component.

So normally, when there is a input change, onChange handles gets called with "synthetic event" as an argument.

onChange = (e) => setInput(e.target.value)

TimePicker and onChange handler

But, in the case of TimePicker component in MUI, whenever the onChange handler is called, arguments that is provided to the handler, is not "synthetic event", but the component's data value.

Object { "$L": "en", "$u": undefined, "$d": Date Tue Jun 20 2023 10:10:00 GMT+0530 (India Standard Time), "$x": {}, "$y": 2023, "$M": 5, "$D": 20, "$W": 2, "$H": 0, "$m": 10, … }

As you can see, there is no event.target.value, the value is just event.

So, when Formik tries to access event.target.value, it is not able to. And therefore, the value is not reflected in the component.

The Solution

In order to circumvent this problem, you need to create your own custom onChange event handler. And you can do this by using, setFieldValue which is present in Formik.

And this will essentially set the mondayFrom field value automatically for you.

       <TimePicker
{...field}
ampm={false}
format="HH:mm"
onChange={(e) => form.setFieldValue(field.name, e)}
slotProps={{
textField: {
label: "Monday From",
size: "small",
fullWidth: true,
},
}}
/>

The data object e above, also has a property "$d" using which you could get the date time value in string format:

   console.log(e["$d"])
// Date Tue Jun 20 2023 10:10:00 GMT+0530 (India Standard Time)

Hope this helps!