Несколько рендеров компонента вместо одного

Есть массив пицц, который я фильтрую по свойству пиццы.

const FilterPanel = ({ pizzas, setPizzas, jsonPizzas }) => {
  console.log(pizzas)

  const filterByFiller = (filler) => {
    return setPizzas(jsonPizzas.filter(item => item.category === filler))
  }

  return (
    <ul className="filter-content" id="fst-filter">
      <li onClick={() => {
        setPizzas(jsonPizzas)
      }}>
        <label htmlFor="item1">Все</label>
      </li>
      <li onClick={() => {
        filterByFiller("meat")
      }}>
        <label htmlFor="item2">Мясные</label>
      </li>
      <li onClick={() => {
        filterByFiller("vegan")
      }}>
        <label htmlFor="item3">Вегетерианская</label>
      </li>
    </ul>
  );
};

export default FilterPanel;

jsonPizzas - исходный массив, прилетевший с запроса, pizzas - стейт, в него сую этот jsonPizzas

Но при клике на один из фильтров стейт меняется 4 раза за клик. Как это можно оптимизировать?

Компонент где объявляется стейт pizzas:

const Home = () => {
let jsonPizzas = require("../data/cards.json")

const [pizzas, setPizzas] = useState(jsonPizzas.slice(0,12))
const [showBtn, setShowBtn] = useState(true)
console.log(showBtn)
return (
    <div className="wrapper">
        <main>
            <section className="pizza-catalog">
                <FilterPanel pizzas={pizzas} setPizzas={setPizzas} jsonPizzas={jsonPizzas}/>
                <div className="card-list">
                    {pizzas.map((item, index) => {
                        return <Card prop={item} key={index}/>
                    })}
                </div>
                <div className={showBtn && pizzas.length >= 11 ? "show-all" : "hideElement"}>
                    <button onClick={() => {
                        setShowBtn(false)
                        setPizzas(jsonPizzas)
                    }}>Показать все</button>
                </div>
            </section>
            
        <Modal />
    </div>
);
};

export default Home;