Estoy creando un sitio de Pokedex solo para practicar y aprender a usar correctamente API Rest, pero he tenido algunos problemas, cuando ingresa al sitio por primera vez, la API se llama dos veces sin motivo, y cuando presiona el siguiente o el botón anterior tienes que presionarlo dos veces para cargar el pokemon anterior/siguiente. No entiendo porque da ese error.

Enlace a GitHub: https://github.com/Makita7/pokedex Aquí está el código donde llamé a la API:

 export const CardList = () =>{ const [ pokeInfo, setPokemonInfo ] = useState([]); const [ loading, setLoading ] = useState(); const [ url, setUrl ] = useState('https://pokeapi.co/api/v2/pokemon'); const [ nextUrl, setNextUrl ] = useState(); const [ prevUrl, setPrevtUrl ] = useState(); const [ pokedex, setPokedex ] = useState(); //console.log(pokedex) const FetchData = async () => { //res short for response setLoading(true); const res = await axios.get(url); setNextUrl(res.data.next); setPrevtUrl(res.data.previous); GetData(res.data.results); setLoading(false); } const GetData = async(res) =>{ res.map ( async(item) =>{ const result = await axios.get(item.url) //console.log(item.name); setPokemonInfo(state =>{ state = [...state, result.data] state.sort(( a, b ) => a.id > b.id ? 1 : -1) return state; }) }) } useEffect(() => { FetchData(); }, []); return( <div className=""> <MoreInfo data={pokedex}/> <div className="cardList flexbox"> <Card pokemon={pokeInfo} loading={loading} infoPokemon={item=>setPokedex(item)}/> </div> <div className="btnContainer center"> <button className="btn" onClick={() =>{ setLoading(true) setPokemonInfo([]) setUrl(prevUrl) FetchData() setLoading(false); }}> Previous </button> <button className="btn" onClick={() =>{ setLoading(true) setPokemonInfo([]) setUrl(nextUrl) FetchData() setLoading(false); }}> Next </button> </div> </div> ); }