Codifiqué un componente Alert. Que puedo mostrar información, éxito, error y advertencia. Necesito hacer este componente completamente independiente. Pero hay algunos problemas. No quiero usar el estado en el padre de Alert, porque hace que Alert sea más no independiente

Cierro la alerta eliminando los elementos de la Alerta, pero esto provocó que la Alerta ya no se mostrara (cuando el usuario comete un error por segunda vez)

Tienes alguna idea para solucionar este problema??

Padre de alerta:

 return ( <main> <div className="welcome-panel flex-column"> {todoState.added ? ( <> <Alert severity="error" style={{ marginBottom: "1rem" }}> Field should not be empty </Alert> <Alert severity="info" style={{ marginBottom: "1rem" }}> Field should not be empty </Alert> </> ) : null} {welcomePanel} </div> <div className="todos flex-row">{todos}</div> </main>

);

Componente de alerta:

 return ( <div className={`${severity} alert flex-row alert-component`} style={style}> <section className="alert-body flex-row"> <div className="close"> <section> <span></span> <span></span> </section> <div onClick={closeAlert}></div> </div> <div className="alert-severity-icon ">{severityIcon.get(severity)}</div> <div className="alert-information"> <div className="title"> <strong> {severity.replace( severity.charAt(0), severity.charAt(0).toUpperCase() )} </strong> </div> <div className="body"> <p> {children} <strong> - check it out</strong> </p> </div> </div> </section> </div> );

Cerrar alerta:

 function closeAlert(event) { event.nativeEvent.path[3].remove(); }