Estoy creando una aplicación donde hay una lista de elementos creados a partir de una serie de objetos y los estoy representando en un mapa como este

 <div className="App"> <div className="notification-list"> { notifications.map( (({ type, text }, i ) => { return ( <Notification handleClick={handleCloseNotification} key={i} index={i} type={type} text={text} /> )} )) } </div>

cada notificación debería desaparecer después de X segundos después de ser procesada... Probé varios enfoques para agregar setTimeout pero ninguno de ellos ha funcionado hasta ahora.

Lo intenté

 useEffect(() => { const timer = setTimeout(() => notifications.map(({}, index) => ( handleCloseNotification( index ) )), 10000); return () => clearTimeout(timer); }, [notifications]);

También intenté agregar esto

 const timer = setInterval(() => handleClick( index ), 1000);

dentro del componente Notificación.

También probé esto

 <div className="notification-list"> { notifications.map( (({ type, text }, i ) => { const timer = setTimeout(() => { handleCloseNotification( i) console.log(i); }, 10000); return ( <Notification handleClick={handleCloseNotification} key={i} index={i} type={type} text={text} /> )} )) } </div>

Dado que tengo una lista que inicialmente genera varias notificaciones al mismo tiempo, mi expectativa es que todas desaparezcan al mismo tiempo. Sin embargo, los elementos desaparecen uno a uno con un intervalo de 10 segundos entre ellos.

Hay un formulario que agrega nuevas notificaciones al formulario, y esas notificaciones deben vivir cada una durante 10 segundos y luego desaparecer. Esta parte parece estar funcionando, pero para los elementos que se representan inicialmente, ¿por qué no funcionan como esperaba?

Gracias.