I have a useEffect function that finds an element by it's ID and then if the element has a certain class then it set's the state to be either true or false. However this only happens on the initial load so if I was to click on the button (which is within the FoodList component) that removes/adds the class, then nothing happens. What's the best way to make this dynamic?

const [filterExpaned, setFilterExpanded] = useState<boolean>();

useEffect(() => {
    const listPanelToggle = document.getElementById('list-panel-toggle');

    if (listPanelToggle?.classList.contains('list-panel-toggle--collapsed')) {
        setFilterExpanded(true);
        console.log('It does have the class');
    } else {
        setFilterExpanded(false);
        console.log('It does not have the class');
    }
}, []);

return (
  <>
    <FoodList /> // The id 'list-panel-toggle' is within this component
    </>
);