title: State disappears after update using React setState hook when using nested fields/object
body: <p>In my example below, when I update a certain field, the other field in my state object disappears/unset and I get a warning about inputs becoming uncontrolled. Example below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const {useState} = React;
  
  const App = () =&gt; {
    const [user, setUser] = useState({ 
      firstName: 'Mary',
      lastName: 'Poppins',
    });
    
    return (
      &lt;div&gt;
        First Name: &lt;input value={user.firstName} onChange={e =&gt; { 
          setUser({firstName: e.target.value});
        }} /&gt;
        &lt;br /&gt;
        Last Name: &lt;input value={user.lastName} onChange={e =&gt; { 
          setUser({lastName: e.target.value});
        }} /&gt;
        &lt;br /&gt;
        {JSON.stringify(user, null, 2)}
      &lt;/div&gt;
    );
  };
  
  ReactDOM.render(&lt;App /&gt;, document.querySelector('#app'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>