React hook to control visibility of HTML dialogs

useModal.js

import { useState } from "react"

const useModal = (selector) => {
    const [modalIsOpen, setIsOpen] = useState(false)

    function toggleDialog() {
        setIsOpen(!modalIsOpen)

        if (modalIsOpen) {
            document.querySelector(`${selector}`).removeAttribute("open")
        } else {
            document.querySelector(`${selector}`).setAttribute("open", true)
        }
    }

    return { toggleDialog, modalIsOpen }
}

export default useModal