onClick method called automatically react - reactjs

Question

I have a react component named <Filters /> which renders a component <PriceFilter />. The <PriceFilter /> component renders a <Filter /> component and some other JSX.
<Filters /> component:
const Filters = ({ price, setPrice }) => {
return (
<div>
<PriceFilter price={price} setPrice={setPrice} />
</div>
);
};
<PriceFilter /> component:
const PriceFilter = ({price, setPrice}) => {
const [show, setShow] = useState(false);
const toggleShow = () => setShow(!show);
return (
<div>
<Filter show={show} toggleShow={toggleShow}>
Price
</Filter>
{show && (
<FilterContainer>
<div>
<div onClick={() => setPrice('$')}>
<span>Inexpensive</span>
</div>
<div onClick={() => setPrice('$$')}>
<span>$$</span>
</div>
<div onClick={() => setPrice('$$$')}>
<span>$$$</span>
</div>
<div onClick={() => setPrice('$$$$')}>
<span>$$$$</span>
</div>
</div>
</FilterContainer>
)}
</div>
);
};
<Filter /> component:
const Filter = ({children, show, toggleShow}) => {
return (
<div>
<span>{children}</span>
{show ? <KeyboardArrowUpIcon onClick={toggleShow} /> : <KeyboardArrowDownIcon onClick={toggleShow} />}
</div>
);
};
Clicking on any of the options (Inexpensive/$$/$$$/$$$$) in the <PriceFilter /> component not only sets the state to the value passed ('$'/'$$'/'$$$'/'$$$$'), but it is also triggering the toggleShow function for some reason. Can someone please provide a solution to this so that the toggleShow function isn't called when clicking on the option.

Answer 1

The code works with minimal setup. See what is going wrong in higher level component Test where Filters is being rendered.
export const Test = () => {
const [price, setPrice] = useState('inexpensive')
return(
<Filters price={price} setPrice={setPrice} />
)
}
const Filters = ({ price, setPrice }) => {
return (
<div>
<PriceFilter price={price} setPrice={setPrice} />
</div>
);
};
const PriceFilter = ({price, setPrice}) => {
const [show, setShow] = useState(false);
const toggleShow = () => {
setShow(!show);
}
return (
<div>
<Filter show={show} toggleShow={toggleShow}>
{price}
</Filter>
{show && (
<div>
<div>
<div onClick={() => setPrice('$')}>
<span>Inexpensive</span>
</div>
<div onClick={() => setPrice('$$')}>
<span>$$</span>
</div>
<div onClick={() => setPrice('$$$')}>
<span>$$$</span>
</div>
<div onClick={() => setPrice('$$$$')}>
<span>$$$$</span>
</div>
</div>
</div>
)}
</div>
);
};
const Filter = ({children, show, toggleShow}) => {
return (
<div>
<span>{children}</span>
{show ? <div onClick={toggleShow}>up</div> : <div onClick={toggleShow}>down</div>}
</div>
);
};

Answer 2

It's working!! I didn't get why but there was a problem in the parent component. I had created a local component in the parent and rendered it there. I just extracted that local component in an independent component and it works now.