title: Setting state array in react
body: <p>I have been trying to push an object into a state array and then into local storage so it can remain visible even after refreshing, everything works fine except final push doesent happen. In order for an object to stay saved in local i have to add it and one after it, and the one after dont get saved. Any help is much appreciated</p>
  <pre><code>function App() {
    const [data, setData] = useState([{ name: &quot;&quot;, thumbnail: { path: &quot;&quot; } }]);
    const [team, setTeam] = useState(JSON.parse(localStorage.getItem(&quot;team&quot;)));
    console.log(team);
    useEffect(() =&gt; {
      fetch(
        &quot;http://gateway.marvel.com/v1/public/characters?apikey=&quot;
      )
        .then((data) =&gt; data.json())
        .then((data) =&gt; setData(data.data.results));
    }, []);
  
    const addToTeam = (hero) =&gt; {
      !team ? setTeam([hero]) : setTeam([...team, hero]);
      localStorage.setItem(&quot;team&quot;, JSON.stringify(team));
    };
  
  </code></pre>