React testing library: The given element does not have a value setter when fireEvent change on input form : <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>
