Why this matters
The production reason.
State that lives too high in the tree forces unrelated UI to rerender and makes components harder to reason about.
Place state beside the button, input, modal, or tab that actually changes it. Lift it only when another component truly needs the value.
This makes refactors easier because the behavior travels with the component.
Copy-ready example
function FilterPanel() {
const [open, setOpen] = useState(false);
return (
<section>
<button type="button" onClick={() => setOpen((value) => !value)}>
Filters
</button>
{open ? <FilterOptions /> : null}
</section>
);
}