title: state hooks is not updating state on change
body: <p>I am building a simple blog app and I am trying to update <code>title</code> of the blog But it is not updating, it is just showing the current state.</p>
  <p>I have tried many times by changing the method of setting state but it is still showing that error.</p>
  <p>App.js</p>
  <pre><code>function BlogDetail() {
      const [blogName, setBlogName] = useState(&quot;&quot;);
  
  
      axios.get(&quot;/api/blog_detail/70/&quot;).then(res =&gt; {
  
         setBlogName(res.data[0].blog_name)
      })
  
    const handleChange = (e) =&gt; {
      console.log(e.target.value)
      setBlogName({
        ...blogName,
        [e.target.name]: e.target.value
      })
    }
  
    const saveBlog = (e) =&gt; {
     // sending to API
     console.log(blogName)
    }
  
     return (
         &lt;div&gt;
         &lt;form&gt;
  
         {blogName}
  
  
         &lt;input type=&quot;text&quot; name=&quot;blogName&quot; value={blogName} onChange={e =&gt; handleChange} /&gt;
  
         &lt;button type=&quot;submit&quot; onClick={e =&gt; saveBlog(e)}&gt;Save&lt;/button&gt;
  
  
         &lt;form&gt;
         &lt;/div&gt;
  
  
     )
  }
  </code></pre>
  <p>And When I update on change instead of updating on submit</p>
  <pre><code>onChange=(e =&gt; setBlogName(e.target.value))
  </code></pre>
  <p>Then it is showing</p>
  <blockquote>
  <p>A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined</p>
  </blockquote>
  <p>I have tried many times but it is still not working.</p>