onClick event not appearing in DOM

export function Popup({
  className,
  title,
  subheader,
  fields,
  footerContent,
  close,
  isMobile,
  ...props
}: PopupProps) {
  const baseClass = [styles.main, "hi"];
  if (className) baseClass.push(className);

  const c = children(() => props.children);

  return (
    <div class={baseClass.join(" ")} onClick={(e) => e.stopPropagation()}> // this click event does not show up in the dom
      <header>
        <h3>{title}</h3>
        <Show when={subheader}>
          <div class="subheader">
            <span>{subheader}</span>
          </div>
        </Show>
        <IconBtn icon={<CloseSvg />} onClick={close} className="close-btn" />
      </header>
      <Show when={fields}>
        <Form fields={fields} close={close} {...props} />
      </Show>
      <Show when={props.children}>
        <>
          <div class="content">{c()}</div>
          {footerContent && <footer>{footerContent}</footer>}
        </>
      </Show>
    </div>
  );
}

export function Modal(props: ModalProps) {
  createEffect(function addCloseEventToModal() {
    const modal = document.getElementById("modal") as HTMLDialogElement;
    modal.onclick = () => {
      props.close();
      modal.close();
    };
  });
  const c = children(() => props.children);
  return (
    <Portal mount={document.querySelector("#modal") as Element}>{c()}</Portal>
  );
}