Debe incluir props en la matriz de dependencia.

 useEffect(() => { // your code }, [props, inactive]);

Debe incluir props.onCollapse como una dependencia.

 useEffect(() => { // ... }, [props.onCollapse, inactive]) // ✅

No debe pasar todo el objeto de props como sugiere otra respuesta.

Y hay algo más sucediendo en su código que también necesita atención. ¿Ves cómo estás usando document.querySelector y classList remove?

 document.querySelectorAll('.sub-menu').forEach((el) => { el.classList.remove("active"); // ⚠️ react is not jQuery });

Este es un anti-patrón en reaccionar. En cambio, su componente de menú debe representar los nombres de clase del classNames como una función pura del estado del menú.

 function Menu({ items = [], initState = true }) { const [active, setActive] = React.useState(initState) const onClick = event => { event.stopPropagation(); setActive(!active) } return active // ✅ data-driven render ? <div className="menu" onClick={onClick}> {items.map((item, key) => Array.isArray(item) ? <Menu key={key} items={item} /> : <MenuItem key={key} item={item} /> )} </div> : <div className="menu" onClick={onClick}> <MenuItem item={items[0]} /> </div> }

Ejecute el código a continuación y haga clic en algunos elementos del menú para verlos alternar abiertos y cerrados. Tenga en cuenta que los efectos useEffect , document.query* y classList no son necesarios.

 function Menu({ items = [], initState = true }) { const [active, setActive] = React.useState(initState) const onClick = event => { event.stopPropagation(); setActive(!active) } return active ? <div className="menu" onClick={onClick}> {items.map((item, key) => Array.isArray(item) ? <Menu key={key} items={item} /> : <MenuItem key={key} item={item} /> )} </div> : <div className="menu" onClick={onClick}> <MenuItem item={items[0]} /> </div> } function MenuItem({ item }) { return <div>{item}</div> } const mymenu = [ "Main Menu", ["Clothing", "Shirts", "Pants", ["Footwear", "Shoes", "Boots"]], ["Accessories", "Bags", "Hats"] ] ReactDOM.render(<Menu items={mymenu} />, document.querySelector("#app"))

 .menu { border: 1px solid gray; padding: 1rem; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <div id="app"></div>