React Dialog component

dialog.tsx

import type { DialogHTMLAttributes } from "react";
import { forwardRef, useCallback, useEffect, useState } from "react";

declare global {
  interface HTMLDialogElement {
    show(): void;
    showModal(): void;
    close(): void;
  }
}

export const Dialog = forwardRef<
  HTMLDialogElement,
  DialogHTMLAttributes<HTMLDialogElement> & { isModal?: boolean }
>(({ isModal = true, open, ...restProps }, ref) => {
  const [el, setEl] = useState<HTMLDialogElement | null>(null);

  const combinedRef = useCallback(
    (e: HTMLDialogElement | null) => {
      if (typeof ref === "function") {
        ref(e);
      } else if (ref) {
        ref.current = e;
      }
      setEl(e);
    },
    [ref]
  );

  useEffect(() => {
    if (open && isModal) {
      el?.showModal();
      return () => el?.close();
    }

    if (open && !isModal) {
      el?.show();
      return () => el?.close();
    }

    el?.close();
    return () => {};
  }, [el, isModal, open]);

  return <dialog ref={combinedRef} {...restProps} />;
});