async prompt with custom component

useAsyncDialog.tsx

import { useState, useCallback } from "react";

type Resolver = ((value: string) => void) | null;
type Rejecter = ((reason?: any) => void) | null;

const useAsyncDialog = () => {
  const [show, setShow] = useState<boolean>(false);
  const [resolver, setResolver] = useState<Resolver>(null);
  const [rejecter, setRejecter] = useState<Rejecter>(null);

  const dialog = useCallback(
    () =>
      new Promise((res) => {
        setShow(true);
        setResolver(
          () =>
            function (value: string) {
              setResolver(null);
              setShow(false);
              res(value);
            }
        );
        setRejecter(
          () =>
            function () {
              setRejecter(null);
              setShow(false);
              res("");
            }
        );
      }),
    [show]
  );

  const handleConfirm = useCallback(
    (value: string) => {
      resolver?.(value);
    },
    [resolver]
  );
  const handleClose = useCallback(() => rejecter?.(), [rejecter]);

  return { dialog, handleConfirm, handleClose, showAsyncPrompt: show };
};

export default useAsyncDialog;