title: Updating state with setSate in array
body: <p>I'm trying to update the setState so as to have ['bulbasaur', 'ivisaur', ...] and all the clicked pokemon in the capturedPokemon array, but so far I can only manage to mutate the same array? From the console.log, if I click on different pokemons, I get only that clicked pokemon in the capturedPkm array. What am I doing wrong?</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { Link } from 'react-router-dom';
  import PokemonIcon from './PokemonIcon';
  
  const PokemonCard = (props) =&gt; {
      const { url } = props
      const URL = url
      const [pokemonCard, setPokemonCard] = useState([])
      const [capturedPkm, setCapturedPkm] = useState([])
      const [notCapturedPkm, setNotCapturedPkm] = useState([])
      const [label, setLabel] = useState('Not captured')
  
      const toggleCaptured = (checked, id) =&gt; {
          const currentChecked = [...capturedPkm];
          if (checked) {
              currentChecked.push(pokemonCard.name)
              console.log(currentChecked)
  
              setLabel('Captured!')
  
          } else {
              setLabel('Not captured!')
  
          }
  
          setCapturedPkm([...capturedPkm, currentChecked]);
          console.log('captured', capturedPkm,)
  
      }
  
      const fetchingPokemonCard = async () =&gt; {
          const res = await fetch(URL);
          const data = await res.json();
          //console.log(data)
          setPokemonCard(data)
      }
  
      useEffect(() =&gt; {
          fetchingPokemonCard()
      }, [URL])
  
      return (
          &lt;&gt;
              &lt;div className='pokemon-card' style={{
                  height: '250px',
                  maxWidth: '250px',
                  margin: '1rem',
                  boxShadow: '5px 5px 5px 4px rgba(0, 0, 0, 0.3)',
                  cursor: 'pointer',
              }} &gt;
                  &lt;Link
                      to={{ pathname: `/pokemon/${pokemonCard.id}` }}
                      state={{ pokemon: pokemonCard, capturedPkm }}
                      style={{ textDecoration: 'none', color: '#000000' }}&gt;
                      &lt;div
                          style={{ padding: '20px', display: 'flex', justifyContent: 'center', alignItems: 'center' }} &gt;
                          &lt;PokemonIcon img={pokemonCard.sprites?.['front_default']} /&gt;
                      &lt;/div&gt;
                  &lt;/Link&gt;
                  &lt;div style={{ textAlign: 'center' }}&gt;
                      &lt;h1 &gt;{pokemonCard.name}&lt;/h1&gt;
                      &lt;label &gt;
                          &lt;input
                              type='checkbox'
                              defaultChecked={false}
                              onChange={(e) =&gt; toggleCaptured(e.target.checked, pokemonCard.id)}
                          /&gt;
                          &lt;span style={{ marginLeft: 8, cursor: 'pointer' }}&gt;
                              {label}
                          &lt;/span&gt;
                      &lt;/label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
              &lt;/div&gt;
          &lt;/&gt;
      )
  }
  
  export default PokemonCard
  </code></pre>