I codded an Alert component. That I can show info, success, error and warning. I need to make this component completely independent. But there are some problems. I don't want to use state in Alert's parent - because it makes Alert more non-independent

I close alert by removing Alert's elements but this caused Alert does not show anymore ( When user make mistake for second times)

Do you have any idea to solve this problem??

Alert's parent:

  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>

);

Alert component:

 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>
  );

Close alert:

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