Reactive UI updates are not working at all

[Tibz-Dankan]

export const someForm = () => {
  const [alert, setAlert] = useState({ type: "", message: "" });
 
  const submitHandler = async () => {
    try {
      // Make actual API call here
      setAlert({
        type: "success",
        message: "some response message from api call",
      });
    } catch (error) {
      setAlert({ type: "error", message: error.message });
    }
  };

  const UI = html`<div>
    <form>
      <div>
        ${alert.current().message &&
        html`<div>
          ${Alert({
            type: alert.current().type,
            message: alert.current().message,
          })}
        </div>`}
      </div>
      <button type="button" onClick="${submitHandler}">Submit</button>
    </form>
  </div>`;

  return reactive(() => UI);
};

The code tries to show an alert message based on the API response but it is not shown upon response. The alert variable updates to the latest value.