title: React - using nested objects as state with hooks to fill form data
body: <p>I have a nested object as state like below -</p>
  <pre><code>const [userInfo, setUserInfo] = useState({
      author:&quot;&quot;,
      user: {
        name: 'rahul',
        email: 'rahul@gmail.com',
        phone: [{ primary: '8888888810' }, { alternate: '7777777716' }]
      }
    });
  </code></pre>
  <p>I want to have 5 input fields - author, name, email, primary, and alternate and <strong>want to use only one handleChange() method to change the fields</strong>.</p>
  <p>You can find the code I wrote on the link - <a href="https://stackblitz.com/edit/react-ngpx7q" rel="nofollow noreferrer">https://stackblitz.com/edit/react-ngpx7q</a></p>
  <p>Here, I am not able to figure out how to update the state correctly. Any help would be greatly appreciated.</p>