title: React input handleInputChange() not working
body: <p>Here is a small extract from a contact form I am making in a personal project.
  In this condition the <code>handleInputChange()</code> on the email input works as expected (I can free-type in the field and the field updates dynamically).</p>
  <pre><code>const FeedbackForm = () =&gt; {
    let [formValues, setFormValues] = useState({ email: &quot;&quot; });
  
    const handleInputChange = (target) =&gt; {
      const updatedFormValues = {
        ...formValues,
        [target.name]: target.value,
      };
      setFormValues(updatedFormValues);
    };
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
    };
  
    return (
        &lt;form onSubmit={handleSubmit}&gt;
            &lt;input
              name=&quot;email&quot;
              value={formValues.email}
              onChange={(e) =&gt; handleInputChange(e.target)}
            /&gt;
          &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
    );
  };
  </code></pre>
  <p>Later in the development I decided I wanted to conditionally show/hide the email field so I abstracted it out to a separate component with a boolean prop to toggle the visibility of the element.</p>
  <pre><code>const FeedbackForm = ({
    emailFormFieldEnabled,
  }) =&gt; {
    let [formValues, setFormValues] = useState({ email: &quot;&quot; });
  
    const handleInputChange = (target) =&gt; {
      const updatedFormValues = {
        ...formValues,
        [target.name]: target.value,
      };
      setFormValues(updatedFormValues);
    };
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
    };
  
    const EmailFormField = ({ visible }) =&gt; {
      if (!visible) {
        return null;
      }
      return (
          &lt;input
            name=&quot;email&quot;
            value={formValues.email}
            onChange={(e) =&gt; handleInputChange(e.target)}
          /&gt;
      );
    };
  
    return (
        &lt;form onSubmit={handleSubmit}&gt;
              &lt;EmailFormField visible={emailFormFieldEnabled} /&gt;
          &lt;button type=&quot;submit&quot;&gt;
              Submit
          &lt;/button&gt;
        &lt;/form&gt;
    );
  };
  </code></pre>
  <p>The toggling visibility works but this appears to have broken the <code>handleInputChange()</code> function. I can no longer free type in the input. I can select the input and type a single character but no more. If I want to type multiple characters in the field (like an email address, for example) I have to re-select the field to enter each character.</p>
  <p>Any idea what I might be doing wrong?</p>