title: react-hook-form custom uncontrolled inputs don't update their meta state (dirty, touched)
body: <p>EDIT: solved by a react-hook-form module update.</p>
  <p><strong>Problem</strong></p>
  <p>react-hook-form does not update form input state <code>dirty</code>, <code>touched</code> on custom components where <code>name</code> is dynamically passed to <code>register</code>. Specifically, field array inputs where the <code>name</code> is something like <code>ingredients.0.description</code> will track the input value but not the input state. Simple names like <code>question</code> or <code>name</code> seem to behave correctly.</p>
  <p>Reproduction of the bug on this <a href="https://codesandbox.io/s/blissful-star-c2e49?file=/src/App.tsx" rel="nofollow noreferrer">CodeSandbox.io environment</a>.</p>
  <p>Steps to reproduce:</p>
  <ol>
  <li>Type or change the value in the &quot;name&quot; field (on the first line)</li>
  <li>Type or change the value in any of the &quot;description&quot; fields (the field array)</li>
  <li>Open react-hook-form DevTools (the pink icon in the bottom right of the browser)</li>
  <li>See that the <code>ingredients</code> fields did not update <code>dirty</code> or <code>touched</code> values despite not matching <code>defaultValue</code> and having blurred off the input</li>
  <li>See that the <code>name</code> field shows <code>dirty: true, touched: true</code> correctly</li>
  </ol>
  <p><strong>Context</strong></p>
  <p>I'm using react-hook-form and running into problems when integrating it with a custom uncontrolled component.</p>
  <p>In most (all?) of the examples I see, the <code>register</code> function is either applied to a native HTML Input Element as one or the other:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;input {...register(&quot;field_name&quot;)} /&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>&lt;input ref={register} name=&quot;field_name&quot; /&gt;
  </code></pre>
  <p>Because I have some custom input styling, I'd like to make reusable components that integrate into react-hook-form, and though I could do something like:</p>
  <pre class="lang-js prettyprint-override"><code>// Input.tsx
  export function Input(props) {
  type Props = {
    type: string;
    name: string;
  };
  
  export function Input(props: Props) {
    const { type, name } = props;
    const { register, getValues, formState } = useFormContext();
    return &lt;input type={type} {...register(name)} /&gt;;
  }
  
  
  // App.tsx
  &lt;FormProvider {...methods} &gt;
    &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
      &lt;Input name=&quot;field_name&quot; type=&quot;text&quot; /&gt;
    &lt;/form&gt;
  &lt;FormProvider/&gt;
  </code></pre>
  <p><strong>Questions</strong></p>
  <ol>
  <li>Am I using <code>register</code> incorrectly?</li>
  <li>Can <code>register</code> take a name dynamically or must it be a static string? Is my field array name description malformed?</li>
  <li>Do uncontrolled component methods need to be applied directly to an <code>&lt;input /&gt;</code> or is it possible to wrap with a custom component and pass the props? What's the most idiomatic way to do this with react-hook-form?</li>
  <li>How can I modify the code in my <a href="https://codesandbox.io/s/blissful-star-c2e49?file=/src/App.tsx" rel="nofollow noreferrer">CodeSandbox</a> to correctly reflect all field inputs' states?</li>
  </ol>