title: useState not re-rendring the componenet
body: <p>I'm using useState hook but after changing the state, the component is not rending itself. I don't know what thing I'm missing.</p>
  <pre><code>import React, {useState} from 'react'
  import List from '@material-ui/core/List'
  import ListTile from &quot;./components/ListTile/ListTile&quot;
  import style from './App.module.css'
  import InputField from &quot;./components/inputField/InputField&quot;;
  
  const App = () =&gt; {
      const [list, setList] = useState([])
  
      const onFormSubmitHandler = (data) =&gt; {
          list.push(data)
          setList(list)
      }
  
      return (
          &lt;div className={style.outerDiv}&gt;
              &lt;h1 className={style.center}&gt;CLister&lt;/h1&gt;
              &lt;InputField onSubmit={onFormSubmitHandler}/&gt;
              &lt;List component=&quot;nav&quot;&gt;
                  {list.map((data, index) =&gt;
                       &lt;ListTile index={index} body={data}/&gt;
                  )}
              &lt;/List&gt;
          &lt;/div&gt;
      );
  }
  
  export default App
  </code></pre>