Получить данные по нажатию кнопки с помощью пользовательского хука

Question

Я хочу загружать данные с помощью пользовательского хука изначально при загрузке страницы, а также при нажатии кнопки.

При любом нажатии количество записей должно увеличиваться на фиксированное число. Проблема в том, что мой хук вызовет бесконечный l oop, вызванный постоянным повторным рендерингом. Как мне решить эти проблемы с помощью пользовательских хуков?

    function useLoadPokemon(increaseTo) {

      const [pokemonState, setPokemonState] = useState([]);
      const [amount, setAmount] = useState(increaseTo);

      const apolloClient = new useApolloClient(getApolloContext());

      useEffect(() => {

        function load() {

          const getPokemon = gql`
            query pokemons($recordCount: Int!){
              pokemons(first:$recordCount) {
                name,
                image
              }
            }
          `;

          apolloClient.query({
            query: getPokemon,
            variables: {
              recordCount: amount,
            },
          })
          .then((pokemon => {
            setPokemonState(pokemon.data.pokemons);
          }));

        }

        load();

      }, [amount])

      const loadPokemon = function(){
        setAmount(amount + amount);
      }

      return [{ pokemonState }, loadPokemon];
    }

    function ShowPokemon() {

      let [{ pokemonState }, loadPokemon] = useLoadPokemon(5);

      // ...

      <input type="button" value="Lade mehr..." onClick={() => { loadPokemon();}}></input>

Сообщение об ошибке:
Ошибка: слишком много повторных визуализаций. React ограничивает количество рендеров, чтобы предотвратить бесконечное l oop.