TimePicker values not saved

[dark_dragonian]

I have a bit of a trouble with the Material UI TimePicker getting the value of the time in a multi pages form.

The form stored the values of the fields after going to the next page and then display the same values again when users go back to the previous page. However, the TimePicker field is unable to display the value stored back to the field and I am not sure why…

Here is the TimePicker implementation:

TimePicker.js

const pickerFormat = 'HH:mm';

export const TimePicker = forwardRef((props, ref) => {
    const { t } = useTranslation();
    const [selectedDate, setSelectedDate] = useState( 
        props.value ? new Date(getMomentFromTimeString(props.value)) : null
    );

    const handleDateChange = date => {
        let time = moment(date).format(pickerFormat);
        (!date || time == null) ? time=moment() : time=date 
        setSelectedDate(time);
    };

    // convert variable time string back to moment object for timePicker
    function getMomentFromTimeString(str) {
        var t = moment(str, 'HH:mm');
        // Now t is a moment.js object of today's date at the time given in str
      
        if (t.get('hour') < 22) // If it's before 9 pm
          t.add('d', 1); // Add 1 day, so that t is tomorrow's date at the same time
        return t;
    }

    return (
        <MuiPickersUtilsProvider utils={MomentUtils}>
            <TextField
                type="time"  
                inputRef={ref}
                {...props}
                defaultValue={selectedDate}
                format={pickerFormat}
                ampm={false}
                onChange={handleDateChange}
                okLabel={t('common.button.ok')}
                cancelLabel={t('common.button.cancel')}
                className="timePicker"
                emptyLabel=' '
            />
            {/*console.log("selectedDate: ", selectedDate)*/} 
        </MuiPickersUtilsProvider>
    )
})

Here is the actual usage of the TimePicker field

<TimePicker
   id={`dateTimeGp[${index}].startTime`}
   name={`dateTimeGp[${index}].startTime`}
   ref={register()}
   label={
      <>
          {t('step3.dateTime.startTime')} <Box component="span" className="danger">*</Box>
      </>
   }
   error={!!errors["dateTimeGp["+index+"].startTime"]}
   defaultValue={item.startTime}
   InputLabelProps={{
      shrink: true,
   }}
   inputProps={{
       step: 300, // 5 min
   }}
 />

Here is the register function

const {
        register,
        handleSubmit,
        control,
        errors,
        clearErrors,
        watch,
        reset,
        getValues,
    } = useForm({
        defaultValues: {
            dateTimeGp: (!data.dateTimeGp||data.dateTimeGp.length<1) ?
            (
                [{
                    startDate: '',
                    endDate: '',
                    startTime: '',
                    endTime: '',
                    recurrence:
                        recurrenceOpt.map((recurrence) => {
                            return {
                                id: recurrence.id,
                                name: recurrence.name,
                                selected: false
                            }
                        })
                }]
            ) :
            (
                data.dateTimeGp.map((obj) => {
                    return {
                        startDate: obj.startDate,
                        endDate: obj.endDate,
                        startTime: obj.startTime,
                        endTime: obj.endTime,
                        recurrence:
                            obj.recurrence.map((recurrence) => {
                                if (recurrence.selected) {
                                    return (
                                        {
                                            id: recurrence.id,
                                            name: recurrence.name,
                                            selected: true
                                        }
                                    )
                                } else {
                                    return (
                                        {
                                            id: recurrence.id,
                                            name: recurrence.name,
                                            selected: false
                                        }
                                    )
                                }
                            })
                    }
                })
            )
        },