title: on first button press state is not updating but function called
body: <p>on first button press onChange method function is called but state is not updating as it should and on second button press it is updating see this </p>
  
  <pre><code>import React,{useState} from 'react';
  function MainHeader(props) {
      const [FirstName, setFirstName] = useState('')
      const [User, setUser] = useState({
          FirstName: '',
          LastName: ''
      })
      const nameOnChange = (event) =&gt; {
          setFirstName(event.target.value)
          console.log(FirstName)
      }
      const addName = () =&gt; {
          setUser({
              ...User,
              FirstName: FirstName
          })
          console.log(User)
          props.addUserToFirebase(User)
      }
  
      return (
          &lt;div&gt;
              &lt;h1&gt;Checking&lt;/h1&gt;
              &lt;input type="text" onChange={(e) =&gt; nameOnChange(e)} value={FirstName}  /&gt;
              &lt;button onClick={() =&gt; addName()}&gt;Enter&lt;/button&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>on nameOnChange it is console.log(FirstName) when first time a pressed something then console logs empty state (initial state) and on second button it updates the previous button pressed. I have tried creating class component as well but i am seeing the same issue , same thing happens in the addName function it updates state on second click .
  see console 
  <a href="https://i.stack.imgur.com/bor3D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bor3D.png" alt="enter image description here"></a></p>