React Modal using Dialog

Dialog.jsx

import { memo, useEffect, useRef } from "react"

const Dialog: React.FC<{ open: boolean, className?:string, children:React.ReactElement }> = ({ open, className, children }) => {
    const dialogRef = useRef<HTMLDialogElement>(null)

    useEffect(() => {
        if (open) {
            if(dialogRef.current?.open){
                dialogRef.current?.close()
            }
            dialogRef.current?.showModal()
        } else {
            dialogRef.current?.close()
        }
    }, [open])

    return (
        <dialog className={className} ref={dialogRef}>
            {children}
        </dialog>
    )
}

export default memo(Dialog)