title: react-hook-form field refreshes after submit
body: <p>I'm sending my react-hook-form field to another function component as a children. After pressing Submit Button, the field refreshes and the value inputed is deleted. What is the problem?</p>
  <p><a href="https://codesandbox.io/s/objective-haze-fbitz?file=/src/App.js" rel="nofollow noreferrer">CodeSandBox example is here</a></p>
  <p>My file <code>App.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  import { Box, Button, Grid, TextField } from &quot;@material-ui/core&quot;;
  
  export default function App() {
    const { register, handleSubmit } = useForm();
  
    function onSubmit(data) {
      console.log(data);
    }
  
    function FieldComponent(props) {
      const { title, children } = props;
      return (
        &lt;Grid container alignItems=&quot;center&quot;&gt;
          &lt;Grid item xs={3}&gt;
            &lt;Box py={5}&gt;
              &lt;div fontWeight=&quot;bold&quot; fontSize=&quot;16&quot;&gt;
                {title}
              &lt;/div&gt;
            &lt;/Box&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={9}&gt;
            &lt;Box py={5}&gt;{children}&lt;/Box&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      );
    }
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Grid container&gt;
          &lt;Grid item xs={12}&gt;
            &lt;FieldComponent title=&quot;name&quot;&gt;
              &lt;TextField variant=&quot;outlined&quot; name=&quot;name&quot; inputRef={register} /&gt;
            &lt;/FieldComponent&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={12}&gt;
            &lt;Button variant=&quot;outlined&quot; onClick={handleSubmit(onSubmit)}&gt;
              Submit
            &lt;/Button&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>