Load more only works once when fetching from API in react

I am currently trying to implement the load more functionality into this website, and I have a function I call when pressing the button, it adds 5 to the count, then this count is fetched, but the button only seems to add 5 the first time

I don't really know what should be done, maybe using the useeffect, but I think is something really simple I can't see

import React, { useEffect, useState } from "react";
import "./BeerList.css";
const BeerList = () => {
const [beerList, setBeerList] = useState(null);
let count = 10;
const loadBeers = async () => {
const response = await fetch(
`https://api.punkapi.com/v2/beers?per_page=${count}`
);
const results = await response.json();
const randomBeerList = results.map((beersObj) => ({
name: beersObj.name,
tagline: beersObj.tagline,
url: beersObj.image_url,
}));
setBeerList(randomBeerList);
};
useEffect(() => {
loadBeers();
}, []);
const increment = () => {
count += 5;
loadBeers();
console.log(count);
}
if (beerList === null) {
return <div>Loading...</div>;
}
return (
<div className="beer-list-parent">
<div className="beer-list">
{beerList.map(({ name, tagline, url }, key) => (
<div key={key} className="beer">
<div className="beer-img">
<img src={url} className="url" />
</div>
<div className="beer-text">
<div className="name">{name}</div>
<div className="tagline">"{tagline}"</div>
</div>
</div>
))}
</div>
<div id="loadmore" className="more-parent">
<button className="more" type="button" onClick={increment}>Load more</button>
</div>
</div>
);
};
export default BeerList;

I tried using a counter and incrementing but only is added once, I console.log and the value was repeating every time.

You're resetting count to 0 every time the component renders (which is every time the state updates). To avoid this you should store it in state.

Besides this, you should also: (i) fetch the data inside a useEffect and not in event handler to avoid race conditions; and (ii) add count as a dependency of your useEffect, because it is a dependency and dependencies should always be in the dependency array, and because this will allow for the useEffect to rerun every time count is updated.

import React, { useEffect, useState } from "react";
import "./BeerList.css";

const BeerList = () => {
  const [beerList, setBeerList] = useState(null);
  const [count, setCount] = useState(10); // <= Change here

  const loadBeers = async () => {
    const response = await fetch(
      `https://api.punkapi.com/v2/beers?per_page=${count}`
    );
    const results = await response.json();
    const randomBeerList = results.map((beersObj) => ({
      name: beersObj.name,
      tagline: beersObj.tagline,
      url: beersObj.image_url,
    }));
    setBeerList(randomBeerList);
  };

  useEffect(() => {
    loadBeers();
  }, [count]); // <= Add here

  const increment = () => {
    setCount(count + 5); // <= Change and remove here
    console.log(count);
  }

  if (beerList === null) {
    return <div>Loading...</div>;
  }
  return (
    <div className="beer-list-parent">
      <div className="beer-list">
        {beerList.map(({ name, tagline, url }, key) => (
          <div key={key} className="beer">
            <div className="beer-img">
              <img src={url} className="url" />
            </div>
            <div className="beer-text">
              <div className="name">{name}</div>
              <div className="tagline">"{tagline}"</div>
            </div>
          </div>
        ))}
      </div>
      <div id="loadmore" className="more-parent">
        <button className="more" type="button" onClick={increment}>Load more</button>
      </div>
    </div>
  );
};

export default BeerList;