Estoy tratando de crear un área de notificaciones. Muestro un ícono de notificación, y cuando el usuario hace clic en él, muestro la lista de notificaciones.

Aquí hay una caja de códigos

El problema es que no puedo mezclarlo con ClickAwayListener .

Cuando uso ClickAwayListener , no se muestra en absoluto.

¿Cómo debo arreglar esto?

HeaderAction.js

 import Tooltip from "@material-ui/core/Tooltip"; import Fade from "@material-ui/core/Fade"; import Collapse from "@material-ui/core/Collapse"; import React, { useState } from "react"; import ClickAwayListener from "@material-ui/core/ClickAwayListener"; import Icon from "@material-ui/core/Icon"; const HeaderAction = ({ icon, title, component }) => { const Component = component || (() => <div>NA</div>); const [showComponent, setShowComponent] = useState(false); const handleClick = () => { setShowComponent(!showComponent); }; return ( <> <Tooltip title={title || ""}> <div onClick={() => handleClick()}> <Icon>{icon}</Icon> </div> </Tooltip> {/* This part is not working */} {/* <ClickAwayListener onClickAway={() => setShowComponent(false)}> <div> <Fade in={showComponent}> <div> <Component /> </div> </Fade> </div> </ClickAwayListener> */} <Fade in={showComponent}> <div> <Component /> </div> </Fade> </> ); }; export { HeaderAction };