title: ui is not updating even though useState is changing
body: <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import &quot;./App.css&quot;;
  
  function App() {
  const [data, setData] = useState({ count: 1 });
  
  const handleClick = () =&gt; {
  let temp = data;
  data.count += 1;
  
  console.log(&quot;temp: &quot;, temp);  // temp: {count: 2}
  
  setData(temp);
  console.log(data); //{count: 2}
  };
  
  React.useEffect(() =&gt; {
  console.log(&quot;hello&quot;);
  }, [data]);
  
   return (
  &lt;div className=&quot;App&quot;&gt;
    {data.count}
  
     &lt;button onClick={handleClick}&gt;add&lt;/button&gt;
   &lt;/div&gt;
   );
   }
  
   export default App;
  </code></pre>
  <p>the state is changing but in the UI display data is not updating. i don't know why? like if I click on the add button the state is changing from</p>
  <pre><code>data = {count: 1} to data = {count: 2}
  </code></pre>
  <p>but in the ui display the data remain 1. it is not updating in the ui. so what to do?</p>