title: Register react hook form input filed with a dot in name
body: <p>I have a weird scenario where I need to register my input field with a name which has a dot in it.</p>
  <p>(Actual usecase looks something like this <strong>name={<code>members.${member.username}.${i}.endTime</code>}</strong> where username can be mail id in some cases)</p>
  <p>Example code:</p>
  <pre><code>import React from &quot;react&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  
  export function App() {
    const { register, handleSubmit } = useForm();
    const onSubmit = (values) =&gt; {
     console.log(JSON.stringify(values));
    };
  
    return (
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        &lt;div style={{ padding: &quot;20px&quot; }}&gt;
        &lt;input {...register(&quot;test1&quot;)} /&gt;
        &lt;br /&gt;
        &lt;input {...register(&quot;test2&quot;)} /&gt;
        &lt;br /&gt;
        &lt;button type=&quot;submit&quot;&gt;submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  );
  </code></pre>
  <p>}</p>
  <p>Expected output - <strong>{&quot;test1&quot;:&quot;test1&quot;,&quot;test2&quot;:&quot;test2&quot;}</strong></p>
  <p>Is there any way I can use the form like this</p>
  <pre><code>  &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        &lt;div style={{ padding: &quot;20px&quot; }}&gt;
        &lt;input {...register(&quot;test1&quot;)} /&gt;
        &lt;br /&gt;
        &lt;input {...register(&quot;test2.com&quot;)} /&gt;
        &lt;br /&gt;
        &lt;button type=&quot;submit&quot;&gt;submit&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  </code></pre>
  <p>And get the output as <strong>{&quot;test1&quot;:&quot;test1&quot;,&quot;test2.com&quot;:&quot;test2&quot;}</strong> instead of the expected output <strong>{&quot;test1&quot;:&quot;test1&quot;,&quot;test2&quot;:{&quot;com&quot;:&quot;test2&quot;}}</strong></p>