title: How to get multiple input fields's values in use state hook
body: <p>I'm getting an error while controlling an input field which is : &quot;A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value...&quot; and when I try to write something in the input field, it gets back to the state value, here's my code for this</p>
  <pre><code>const [inputs, setInputs] = useState({});
  
  useEffect(() =&gt; {
      Http.get(apiEndPoint, {
        params: {
          email: user.userEmail,
        },
      }).then((res) =&gt; setInputs(res.data));
    });
  
  const handleChange = (e) =&gt; {
      setInputs((prevState) =&gt; ({
        ...prevState,
        [e.target.name]: e.target.value,
      }));
    };
  </code></pre>
  <p>These are two of the several input fields,</p>
  <pre><code>&lt;Row&gt;
                 &lt;Col className=&quot;pr-1&quot; md=&quot;6&quot;&gt;
                    &lt;Form.Group&gt;
                      &lt;label&gt;First Name&lt;/label&gt;
                      &lt;Form.Control
                        name=&quot;firstName&quot;
                        onChange={handleChange}
                        type=&quot;text&quot;
                        value={inputs.firstName || &quot;&quot;}
                      &gt;&lt;/Form.Control&gt;
                    &lt;/Form.Group&gt;
                  &lt;/Col&gt;
                  &lt;Col className=&quot;pl-1&quot; md=&quot;6&quot;&gt;
                    &lt;Form.Group&gt;
                      &lt;label&gt;Last Name&lt;/label&gt;
                      &lt;Form.Control
                        name=&quot;lastName&quot;
                        onChange={handleChange}
                        type=&quot;text&quot;
                        value={inputs.lastName || &quot;&quot;}
                      &gt;&lt;/Form.Control&gt;
                    &lt;/Form.Group&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
  </code></pre>