title: React testing library: The given element does not have a value setter when fireEvent change on input form
body: <p>I want to change the value of <a href="https://material-ui.com/components/text-fields/" rel="noreferrer">material UI</a> <code>TextField</code> in react testing library.
  I already set up the data-testid. Then using <code>getByTestId</code> i picked up the input element.</p>
  
  <pre><code>// the component
  &lt;TextField
    data-testid="input-email"
    variant="outlined"
    margin="normal"
    required
    fullWidth
    id="email"
    label="Email Address"
    name="email"
    value={email}
    onChange={e =&gt; setEmail(e.target.value)}
    autoComplete="email"
    autoFocus
  /&gt;
  // the test 
  //...
  let userInput = getByTestId('input-email')
  fireEvent.change(userInput, { target: { value: 'correct@mail.com' } })
  </code></pre>
  
  <p>but this doesn't work as it's returning error: <code>The given element does not have a value setter</code>. Isn't the element uses <code>e.target.value</code> on it's <code>onChange</code> attribute? What am I do wrong?</p>