Custom Next.JS (React.JS) modal using headless ui

Modal.tsx

import { Fragment } from "react";
import { Dialog, Transition } from "@headlessui/react";

const Modal = ({
  open,
  onClose,
  title,
  children,
}: {
  open: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
}) => {
  return (
    <>
      <Transition appear show={open} as={Fragment}>
        <Dialog as="div" className="relative z-10" onClose={onClose}>
          <Transition.Child
            as={Fragment}
            enter="ease-out duration-300"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="ease-in duration-200"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div className="fixed inset-0 bg-black bg-opacity-25" />
          </Transition.Child>

          <div className="fixed inset-0 overflow-y-auto">
            <div className="flex min-h-full items-center justify-center p-4 text-center">
              <Transition.Child
                as={Fragment}
                enter="ease-out duration-300"
                enterFrom="opacity-0 scale-95"
                enterTo="opacity-100 scale-100"
                leave="ease-in duration-200"
                leaveFrom="opacity-100 scale-100"
                leaveTo="opacity-0 scale-95"
              >
                <Dialog.Panel className="w-[90vw] transform overflow-hidden rounded-[20px] !bg-white p-6 text-left align-middle shadow-[20px_20px_60px_#0000000D] shadow-xl transition-all dark:!bg-black md:w-[60%] lg:w-[40%]">
                  <Dialog.Title
                    as="h3"
                    className="text-xl font-medium md:text-2xl"
                  >
                    {title}
                  </Dialog.Title>
                  <div className="mt-4 flex w-full flex-col items-center justify-center space-y-2">
                    {children}
                  </div>
                </Dialog.Panel>
              </Transition.Child>
            </div>
          </div>
        </Dialog>
      </Transition>
    </>
  );
};

export default Modal;