title: react-hook-form's setValue method is not working if input is in material ui dialog
body: <p>I tried to use react-hook-form to validate inputs. But I found that if the input is placed in Material UI's dialog component, react-hook-form's <code>setValue</code> is not working as expected, but it works when I remove Dialog component. I guess the reason is that the value is set before the component mounts, but still can't find out the solution.</p>
  
  <p>The value will be retrieved from the server, so I can't use react-hook-form's <code>defaultValues</code>.</p>
  
  <p><a href="https://codesandbox.io/s/react-hook-form-material-ui-twbbw" rel="noreferrer">https://codesandbox.io/s/react-hook-form-material-ui-twbbw</a></p>
  
  <p>I have tried to use <code>useState</code> to control the input value, but there is another problem. When clear the input, click submit button, and error message shows, the first letter I key in will not be displayed.</p>
  
  <p><a href="https://codesandbox.io/s/react-hook-form-material-ui-ve2en" rel="noreferrer">https://codesandbox.io/s/react-hook-form-material-ui-ve2en</a></p>