When I try to concat an element it returns an empty array first and then it is always one behind

Question

I want to create an array that in each click it concats the name of the pokemon that was clicked, I've been doing this by assigning the function pushPokemon but it is not working as expected because for now, when I click the first time one button it returns an empty array and the second time I click, it stores the first that it was clicked so it always goes one name behind the one that was actually clicked. I don't know how to go around this problem.

import React, {useState, useEffect} from 'react'

function Cards() {
  const [items, setItems] = useState([])
  const [clicked, setClicked] = useState([])

  useEffect(() => {
  fetch("https://pokeapi.co/api/v2/pokemon/?limit=12")
    .then((res) => res.json())
    .then(({ results }) => {
      setItems(results);
    });
}, []);

const pushPokemon = (e) => {

  var pokemon = e.target.innerHTML
  const newPokemon = clicked.concat(pokemon)
  setClicked(newPokemon)
  console.log(clicked)
}

    return (
        <div>
        {items.map(item => (
          <button onClick={pushPokemon}>{item.name}</button>
        ))}
        </div>
    )
}

export default Cards