Tengo una función useEffect que encuentra un elemento por su ID y luego, si el elemento tiene una clase determinada, establece que el estado sea verdadero o falso. Sin embargo, esto solo sucede en la carga inicial, por lo que si tuviera que hacer clic en el botón (que se encuentra dentro del componente FoodList) que elimina/agrega la clase, entonces no sucede nada. ¿Cuál es la mejor manera de hacer esta dinámica?

 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 </> );