Reset form method not working in timepicker

Question

I am trying to reset the form value when clicking the reset button. But when I reset the form that time rest of the form fields reset except the time picker field.

I am using controller hooks form and MUI TimePicker.

import { useFormContext, Controller } from 'react-hook-form';
import { TimePicker } from '@mui/lab';

const dispatch = useDispatch();
const methods = useFormContext();
const { formState, watch, getValues, reset } = methods;
const { isValid, dirtyFields } = formState;

const [morningShiftStartValue, setMorningShiftStartValue] = useState(null));


<Controller
    name="morningShiftStartTime"
    id="morningShiftStartTime"
    control={control}
    render={({ field }) => (
        <TimePicker
        name="morningShiftStartTime"
        label="Morning Shift Start Time"
        value={morningShiftStartValue}
        ampm={false}
        onChange={(newValue) => {
          field.onChange(newValue);
          setMorningShiftStartValue(newValue);
        }}
        renderInput={(field) => <TextField {...field} />}
      />
    )}
  />

Also set initial default value null or "" but still not worked.

Please help me to resolve this issue.

Answer 1

This happens because you are storing value of your timePicker in useState instead of in Controller (i suppose that you are using hookform). Just take value to takepicker from Controller

value={field.value}

or you can just destructuralize whole value in your TimePicker if there is no need to keep value separately

<Controller
    name="morningShiftStartTime"
    id="morningShiftStartTime"
    control={control}
    render={({field:{onChange, ...field}}) => (
        <TimePicker
        name="morningShiftStartTime"
        label="Morning Shift Start Time"
        ampm={false}
        renderInput={(field) => <TextField {...field} />}
        onChange={(e)=>onChange(e.target.value)}
        {...field}
      />
    )}
  />