useModal.tsx

import { useState } from "react"

const useModal = (initial = false, duration = 300) => {
  const [isOpen, setIsOpen] = useState(initial)

  const closeModal = () => {
    return new Promise((res) => {
      setIsOpen(false)
      setTimeout(() => {
        res(true)
      }, duration)
    })
  }

  const openModal = () => {
    setIsOpen(true)
  }

  return {
    isOpen,
    closeModal,
    openModal,
  }
}

export default useModal

This can be used to close the form and then reset the state of the contents inside of the modal, I got this issue when using @headlessui/react where the modal closes on transition for 300ms but the state was getting reset before the modal gets closed