title: React Hook Form dirtyFields returns incomplete/ missing field that should be dirty
body: <p>One field in my form <code>endTimeMins</code> seems to be not registering to formState. I have four fields all of them have no problem being dirty, I can read them as dirty but not the <code>endTimeMins</code> field.Additional information, I am using MUI v4 for my input components.</p>
  <p>I created the input fields in a reusable way. Overall it renders 4 fields.</p>
  <p><strong>Here is my startTimeHour/endTimeHour first.</strong></p>
  <pre><code>   &lt;Controller
        name={`${timeType}Hour`}
        control={control}
        rules={{ required: true, validate: () =&gt; _isEndGreaterThanStart() || errorMsgs.endNotGreater }}
        render={({ field: { onChange, value, name, onInputChange } }) =&gt; (
          &lt;Controls.SingleAutoComplete
            name={`${timeType}Hour`}
            disableClearable
            freeSolo
            value={value.toString()}
            inputValue={value}
            className={classes.autoCompleteInput}
            error={!!errors[name]?.message}
            options={HOURS_OPTIONS.map((option) =&gt; option.value)}
            onChange={(e, newValue) =&gt; {
              onChange(newValue);
              _handleStartEndRelation(name, newValue);
            }}
            onInputChange={(e, newValue) =&gt; {
              onChange(handleTimeInputs(newValue, 12).toString()); //handle unwanted inputs
              _handleStartEndRelation(name, newValue);
            }}
          /&gt;
        )}
      /&gt;
  </code></pre>
  <p>And here is for my startTimeMins/<strong>endTimeMins</strong></p>
  <pre><code>&lt;Controller
        name={`${timeType}Mins`}
        control={control}
        rules={{ required: true }}
        render={({ field: { onChange, value, name, onBlur } }) =&gt; (
          &lt;Controls.SingleAutoComplete
            name={`${timeType}Mins`}
            options={MINS_OPTIONS.map((option) =&gt; option.value)}
            getOptionDisabled={(option) =&gt; option === MINS_OPTIONS[4].value}
            disableClearable
            className={classes.autoCompleteInput}
            freeSolo
            error={!!errors.endTimeHour?.message &amp;&amp; name === 'endTimeMins'}
            value={value.toString()}
            inputValue={value}
            onChange={(e, newValue) =&gt; {
              onChange(newValue);
              trigger('endTimeHour');
            }}
            onInputChange={(e, newValue) =&gt; {
              onChange(handleTimeInputs(newValue, 59, true).toString()); 
              _handleStartEndRelation(name, handleTimeInputs(newValue, 59, true).toString());
              
            }}
            onBlur={() =&gt; {  
              if (value.length === 1) {
                onChange(`0${value}`);
                _handleStartEndRelation(name, `0${value}`);
               
              }
            }}
          /&gt;
        )}
      /&gt;
  </code></pre>
  <p>Let me also show my function that handles relation between my inputs. This is just basically increment endTime basing on startTime.</p>
  <pre><code>  const _handleStartEndRelation = (name, value) =&gt; {
      if (name === 'startTimeHour' &amp;&amp; value !== '0') {
        if (value === '12') {
          setValue('endTimeHour', '1');
        } else if (value === '') {
          setValue('endTimeHour', '');
        } else {
          setValue('endTimeHour', +value + 1);
        }
      }
  
      if (name === 'startTimeMins') {
        setValue('endTimeMins', value);
      }
  
      trigger('endTimeHour');
    };
  </code></pre>
  <p>With all that I have no problem getting or setting the values for the fields. Is just the isDirty state for my field endTime is having undefined when I check <code>console.log(_getFieldState('endTimeMins').isDirty);</code>and it is missing from the dirtyFields when I check it using <code>console.log(dirtyFields);</code></p>
  <p>I made sure I set it in defaultValues as well.</p>
  <pre><code>  const {
      handleSubmit,
      setValue,
      getValues,
      _getFieldState,
      trigger,
      control,
      reset,
      formState: { isDirty, dirtyFields, isValid, errors }
    } = useForm({
      defaultValues: {
        OFIdate: new Date(),
        startTimeHour: '',
        endTimeHour: '',
        startTimeMins: '',
        endTimeMins: ''
      },
      mode: 'onChange'
    });
  </code></pre>
  <p>What could I be missing here? I compare my code fields to each other and it's not that different for me. So why is this happening?</p>