title: React, setInterval not working properly, h1 element not being updated correctly
body: <p>I want to create a simple React app that upadates a h1 element every second with setInterval function. I have an array with strings and every second I want randomly pick a string from that array and uses that string inside h1. But my code doesn't work properly. h1 is not being updated every second but every millisecond.</p>
  <pre><code>import PersonalInfo from './PersonalInfo.js'
  import { useState } from 'react';
  
  function App() {
    const myPersonalInfo = ['books', 'music', 'code']; 
    const [state, changeState] = useState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
  
    setInterval(() =&gt; {
      changeState(myPersonalInfo[Math.floor(Math.random() * myPersonalInfo.length)]);
    }, 2000);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;PersonalInfo title={state} /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <pre><code>function PersonalInfo({ title}) {
      return &lt;div&gt;
          &lt;h1&gt;I Love {title} &lt;/h1&gt;
      &lt;/div&gt;
  }
  
  export default PersonalInfo
  
  </code></pre>