Invalid hook call, как правильно использовать хук в данном случаи?

Question

[uzi_no_uzi]

Имеется такой компонент

import PokemonItem from './../PokemonItem';

function PokemonList() {

    const [pokemons, setPokemons] = useState({
        pokemonList: [],
        loading: true,
    }); 

    useEffect(()=>{
        fetch('https://pokeapi.co/api/v2/pokemon/')
        .then(res => res.json())
        .then(body => {
            setPokemons({
                pokemonList: body.results,
                loading: false,
            })

        })
    }, [])




    let pokemonItems = pokemons.pokemonList.map((pokemon, index) => {
        return <PokemonItem name={pokemon.name} key={index} url={pokemon.url} />
    })


    return(
        <div className="pokemon-list">
            {pokemonItems}
        </div>
    )
}

Я получаю данные с сервера, дальше создаю компоненты , где в props передаю ссылку для получения полной информации на каждый элемент списка.

В компоненте , я создаю хук с состоянием для каждого элемента списка:

function PokemonItem(props) {



    const [pokemon, setPokemon] = useState({
        pokemonInfo: [],
        loading: true,
    }); 




    return(
        <li className="pokemon-item">
            <div className="pokemon-item__profile">
                <img src="" alt="" className="pokemon-item__sprite"/>
                <span className="pokemon-item__name">
                    {props.name}
                </span>
            </div>
        </li>
    )
}

Но получаю такую ошибку:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Вроде нескольких копий нет, правил хуков тоже не нарушал, и версии, нормальные, раз крашиться начало именно в этом компоненте, до этого хуки работали. В чем может быть проблема?

Answer 1

[hzzzzl]

а если в PokemonItem переименовать переменную в хуке?
может быть реакт как-то по хитрому всё раскладывает в одну функцию в PokemonList, и тогда выходит что

pokemons.pokemonList.map((pokemon, index) => {
  .....
  const [pokemon, setPokemon] = useState({..
  // одинаковое имя переменной pokemon
})

хз, вряд ли конечно