title: React reload on setState of an array
body: <p>I just started with react and next. I was wondering why the value is reloading on the webpage when I update a useState like this [test, setTest] = useState(&quot;test&quot;), but not in the case below. Can anyone explain why and how to fix it?</p>
  <pre><code>const [testing, setTest] = useState({
          name:&quot;test&quot;
      })
  
      function test(){
          setTest(old =&gt;{
              old.name = &quot;new name&quot;
              return old;
          })
      }
  
      return (
          &lt;ThemeProvider theme={theme&gt;
              &lt;button onClick={test} /&gt;
              &lt;GlobalStyles/&gt;
  
              &lt;h1&gt;{testing.name}&lt;/h1&gt;
          &lt;/ThemeProvider&gt;
      )
  </code></pre>