title: MUI Time picker doesn't show formatted time value in input field
body: <p>My main objective is to use MUI time picker with yup validation and react-hook-form but the problem I'm facing is that when I choose time from time picker the value is not updated in the text field as shown below.
  <a href="https://i.stack.imgur.com/LVkgK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LVkgK.png" alt="Main Problem image" /></a></p>
  <p>I have used type 'TIME' for my database so I need the input to be formatted. However, the working one (End Time) returns time with date which is not accepted in the database. The difference is shown in the console log below.</p>
  <pre><code>day: &quot;tuesday&quot;
  end_time: &quot;Tue May 31 2022 05:27:00 GMT+0545 (Nepal Time)&quot;
  start_time: &quot;05:29:00&quot;
  subject: &quot;Account&quot;
  [[Prototype]]: Object
  </code></pre>
  <p>Here is my source code:</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  import { Button, Box, Card, CardContent, TextField, Typography, CardHeader, Grid, MenuItem } from '@mui/material';
  import { useNavigate, useParams } from 'react-router-dom';
  import { useForm, Controller } from 'react-hook-form';
  import { yupResolver } from '@hookform/resolvers/yup';
  import * as Yup from 'yup';
  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
  import { TimePicker, LocalizationProvider } from '@mui/x-date-pickers';
  import { format, parseISO } from 'date-fns';
  import TimeTableService from '../../../services/timetable.service';
  import SubjectService from '../../../services/subject.service';
  
  const TimetableForm = () =&gt; {
      const { id } = useParams();
      const validationSchema = Yup.object().shape({
          day: Yup.string().required(&quot;Day is required&quot;),
          start_time: Yup.string().required(&quot;Start time is required&quot;),
          end_time: Yup.string().required(&quot;End time is required&quot;),
          subject: Yup.string().required(&quot;Subject is required&quot;),
      });
      const {
          control,
          handleSubmit,
          setValue,
          formState: { errors }
      } = useForm({ resolver: yupResolver(validationSchema), mode: 'onChange' });
      const initialTimeTableState = {
          id: null,
          day: '',
          start_time: '',
          end_time: '',
          Subject: {},
      }
      const [currentTimeTable, setCurrentTimeTable] = useState(initialTimeTableState);
      const [subjects, setSubjects] = useState([]);
      const [editMode, setEditMode] = useState(false);
      const [loading, setLoading] = useState(false);
      const [message, setMessage] = useState(&quot;&quot;);
      const navigate = useNavigate();
  
      useEffect(() =&gt; {
          SubjectService.getAllSubjects().then(response =&gt; {
              setSubjects(response.data);
          })
          if (id) {
              TimeTableService.getTimeTable(id).then(response =&gt; {
                  const timeTable = response.data;
                  const fields = ['day', 'start_time', 'end_time'];
                  fields.forEach(field =&gt; setValue(field, timeTable[field]));
                  setValue('subject', timeTable.Subject.name);
                  setCurrentTimeTable(timeTable);
                  setEditMode(true);
              })
          }
      }, [id, setValue]);
  
      const onError = (errors, e) =&gt; console.log(errors, e);
      const onSubmit = (data) =&gt; {
          const start_time = data.start_time;
          // const start = format(start_time, &quot;hh:mm a&quot;);
          console.log(start_time, data);
          // setMessage(&quot;&quot;);
          // setLoading(true);
          // if (editMode) {
          //     TimeTableService.updateTimeTable(id, data).then(() =&gt; {
          //         setLoading(false);
          //         navigate(&quot;/dashboard/timetable&quot;);
          //     }, (error) =&gt; {
          //         const resMessage = (error.response &amp;&amp; error.response.data &amp;&amp; error.response.data.message) || error.message || error.toString();
          //         setLoading(false);
          //         setMessage(resMessage);
          //     });
          // } else {
          //     TimeTableService.createTimeTable(data).then(() =&gt; {
          //         setLoading(false);
          //         navigate(&quot;/dashboard/timetable&quot;);
          //         window.location.reload();
          //     }, (error) =&gt; {
          //         const resMessage = (error.response &amp;&amp; error.response.data &amp;&amp; error.response.data.message) || error.message || error.toString();
          //         setLoading(false);
          //         setMessage(resMessage);
          //     });
          // }
      }
  
      const days = [
          {
              title: &quot;Sunday&quot;,
              value: &quot;sunday&quot;
          },
          {
              title: &quot;Monday&quot;,
              value: &quot;monday&quot;
          },
          {
              title: &quot;Tuesday&quot;,
              value: &quot;tuesday&quot;
          },
          {
              title: &quot;Wednesday&quot;,
              value: &quot;wednesday&quot;
          },
          {
              title: &quot;Thursday&quot;,
              value: &quot;thursday&quot;
          },
          {
              title: &quot;Friday&quot;,
              value: &quot;friday&quot;
          },
          {
              title: &quot;Saturday&quot;,
              value: &quot;saturday&quot;
          }
      ];
  
      return (
          &lt;Box sx={{ mt: 3 }}&gt;
              &lt;Card&gt;
                  &lt;Box sx={{ minWidth: 1050 }}&gt;
                      &lt;CardHeader
                          title={id ? &quot;Edit Time Table&quot; : &quot;Add Time Table&quot;}
                      /&gt;
                      &lt;CardContent&gt;
                          {message &amp;&amp; (&lt;Typography variant='body2' color='error' &gt;{message}&lt;/Typography&gt;)}
                          &lt;Grid container spacing={2}&gt;
                              &lt;Grid item md={4} xs={6}&gt;
                                  &lt;LocalizationProvider dateAdapter={AdapterDateFns}&gt;
                                      &lt;Controller
                                          control={control}
                                          name=&quot;start_time&quot;
                                          defaultValue={currentTimeTable.start_time || &quot;&quot;}
                                          render={({ field }) =&gt; (
                                              &lt;TimePicker
                                                  {...field}
                                                  inputFormat=&quot;HH:mm:ss&quot;
                                                  mask='__:__:__'
                                                  label=&quot;Start Time&quot;
                                                  onChange={(time) =&gt; {
                                                      const formattedTime = format(time, &quot;HH:mm:ss&quot;);
                                                      field.onChange(formattedTime);
                                                  }}
                                                  renderInput={(params) =&gt; (
                                                      &lt;TextField
                                                          {...params}
                                                          fullWidth
                                                          label=&quot;Start Time&quot;
                                                          variant=&quot;outlined&quot;
                                                          margin='dense'
                                                          color='dark'
                                                          size='small'
                                                          error={errors.start_time ? true : false}
                                                      /&gt;
                                                  )}
                                              /&gt;
                                          )}
                                      /&gt;
                                  &lt;/LocalizationProvider&gt;
                                  &lt;Typography variant=&quot;body2&quot; color=&quot;error&quot;&gt;
                                      {errors.start_time?.message}
                                  &lt;/Typography&gt;
                              &lt;/Grid&gt;
                              &lt;Grid item md={4} xs={6}&gt;
                                  &lt;LocalizationProvider dateAdapter={AdapterDateFns}&gt;
                                      &lt;Controller
                                          control={control}
                                          name=&quot;end_time&quot;
                                          defaultValue={currentTimeTable.end_time || &quot;&quot;}
                                          render={({ field }) =&gt; (
                                              &lt;TimePicker
                                                  {...field}
                                                  label=&quot;End Time&quot;
                                                  // onChange={(time) =&gt; field.onChange(time)}
                                                  renderInput={(params) =&gt; (
                                                      &lt;TextField
                                                          {...params}
                                                          fullWidth
                                                          label=&quot;End Time&quot;
                                                          variant=&quot;outlined&quot;
                                                          margin='dense'
                                                          color='dark'
                                                          size='small'
                                                          error={errors.end_time ? true : false}
                                                      /&gt;
                                                  )}
                                              /&gt;
                                          )}
                                      /&gt;
                                  &lt;/LocalizationProvider&gt;
                                  &lt;Typography variant=&quot;body2&quot; color=&quot;error&quot;&gt;
                                      {errors.end_time?.message}
                                  &lt;/Typography&gt;
                              &lt;/Grid&gt;
                              &lt;Grid item md={4} xs={6}&gt;
                                  &lt;Controller
                                      control={control}
                                      name='subject'
                                      defaultValue={currentTimeTable.Subject.name || &quot;&quot;}
                                      render={({ field }) =&gt; (
                                          &lt;&gt;
                                              &lt;TextField
                                                  {...field}
                                                  select
                                                  fullWidth
                                                  label='Subject'
                                                  variant='outlined'
                                                  margin='dense'
                                                  color='dark'
                                                  size='small'
                                                  error={errors.subject ? true : false}
                                              &gt;
                                                  {subjects.map(subject =&gt; (
                                                      &lt;MenuItem key={subject.id} value={subject.name}&gt;{subject.name}&lt;/MenuItem&gt;
                                                  ))}
                                              &lt;/TextField&gt;
                                          &lt;/&gt;
                                      )}
                                  /&gt;
                                  &lt;Typography variant=&quot;body2&quot; color=&quot;error&quot;&gt;
                                      {errors.subject?.message}
                                  &lt;/Typography&gt;
                              &lt;/Grid&gt;
                              &lt;Grid item md={4} xs={6}&gt;
                                  &lt;Controller
                                      control={control}
                                      name='day'
                                      defaultValue={currentTimeTable.day || &quot;&quot;}
                                      render={({ field }) =&gt; (
                                          &lt;&gt;
                                              &lt;TextField
                                                  {...field}
                                                  select
                                                  fullWidth
                                                  label='Day'
                                                  variant='outlined'
                                                  margin='dense'
                                                  color='dark'
                                                  size='small'
                                                  error={errors.day ? true : false}
                                              &gt;
                                                  {days.map(day =&gt; (
                                                      &lt;MenuItem key={day.title} value={day.value}&gt;{day.title}&lt;/MenuItem&gt;
                                                  ))}
                                              &lt;/TextField&gt;
                                          &lt;/&gt;
                                      )}
                                  /&gt;
                                  &lt;Typography variant=&quot;body2&quot; color=&quot;error&quot;&gt;
                                      {errors.day?.message}
                                  &lt;/Typography&gt;
                              &lt;/Grid&gt;
                          &lt;/Grid&gt;
                          &lt;Button
                              variant='outlined'
                              color={(loading) ? 'warning' : 'success'}
                              sx={{ my: 1.5 }}
                              disabled={(loading) ? true : false}
                              onClick={handleSubmit(onSubmit, onError)}&gt;
                              {(loading) ? &quot;Loading...&quot; : &quot;Submit&quot;}
                          &lt;/Button&gt;
                      &lt;/CardContent&gt;
                  &lt;/Box&gt;
              &lt;/Card&gt;
          &lt;/Box&gt;
      )
  }
  
  export default TimetableForm
  </code></pre>
  <p>Is there any way to fix this? Thanks.</p>
  <p>NOTE: <code>TimetableForm</code> component is rendered by using <code>&lt;Outlet /&gt;</code> of react route.</p>
  <p>EDIT: This is the codeSandbox link : <a href="https://codesandbox.io/s/gifted-roentgen-94bnpq" rel="nofollow noreferrer">https://codesandbox.io/s/gifted-roentgen-94bnpq</a></p>