Ребят есть два листа в app.js у обоих showFilterbutton, у

Question

Ребят есть два листа в app.js у обоих showFilterbutton, у

второго он false, но почему-то по итогу у обоих фильтры остаются, что я делаю не так
App.js

<PizzaList
food={pizzas}
loading={isLoading}
title={"Пицца"}
showFilterbutton={true}></PizzaList>
<PizzaList
food={snacks}
loading={isLoading}
title={"Снэки"}
showFilterbutton={false}></PizzaList>

PizzaList.js

const PizzaList = ({ food, loading, title, showFilterbutton })
<PizzasTop showFilter={setFiltershow} title={title} showFilterbutton={showFilterbutton}></PizzasTop>

PizzasTop.js

const PizzasTop = ({ showFilter, title, showFilterbutton }) => {
return (
<div className="food__top">
<div className="food__title">{title}</div>
{showFilterbutton ? (
<button onClick={() => showFilter(true)} className="food__filter">
<div className="food__fitler-img">
<img src="img/Filter.svg" alt="fitler" />
</div>
Фильтры
</button>
) : null}
</div>
);
};