Tengo un menú que debería abrirse cuando hago clic en un botón. y cierro cuando vuelvo a hacer clic en el botón o hago clic fuera del menú. Funciona bien, pero tiene un error cuando hago clic en el svg icon dentro del botón y no funciona, el menú no se abre.

 const MoreActionBtn = () => { const [showMoreAction, setShowMoreAction] = useState(false); const moreBtns = useRef(); const { current } = moreBtns; useEffect(() => { const outSideClickHandler = (e) => { if (current && !current.contains(e.target)) { setShowMoreAction(false); } }; document.addEventListener("click", outSideClickHandler); return () => { document.removeEventListener("click", outSideClickHandler); }; }, [current]); function toggleMoreAcrion() { setShowMoreAction((prev) => !prev); } return ( <div ref={moreBtns} className="more-action-wrapper"> {showMoreAction && ( <div> <button> <MdDone /> </button> <button> <MdOutlineModeEdit /> </button> </div> )} <button onClick={toggleMoreAcrion}> {showMoreAction ? <MdOutlineCancel /> : <MdStars />} </button> </div> ); };

Aquí hay un codesandbox de mi código. ¿Hay una solución mejor?