Custom ContextMenu (Submenu) about g6 HOT 2 CLOSED

import { Dropdown, Menu } from "antd";
import SubMenu from "antd/es/menu/SubMenu";
import { useEffect, useState } from "react";
import { createPortal } from "react-dom";

const SorguYapContextMenu = ({ x, y, id, targetType, onClose }) => {
    console.log("id, click element id", id);
    console.log("targetType node,edge or canvas", targetType);
    const [visible, setVisible] = useState(true);
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (!event.target.closest('.g6-contextmenu')) {
                setTimeout(() => {
                    setVisible(false);
                    onClose();
                }, 150)
            }
        };

        const timer = setTimeout(() => {
            document.addEventListener('mousedown', handleClickOutside);
        }, 0);

        return () => {
            clearTimeout(timer);
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [onClose]);



    const menu = (): JSX.Element => {
        if (targetType === "node") {
            return <Menu triggerSubMenuAction={"hover"} onClick={(e) => console.log("click", e)}>
                <Menu.Item key="1">node 1</Menu.Item>
                <Menu.Item key="2">Option 2</Menu.Item>
                <Menu.Item key="3">Option 3</Menu.Item>
                <SubMenu onTitleClick={(e) => e.domEvent.stopPropagation()} key="sub1" title="Submenu 1">
                    <Menu.Item key="5">Option 5</Menu.Item>
                    <Menu.Item key="6">Option 6</Menu.Item>
                </SubMenu>
            </Menu>
        }
        else if (targetType === "edge") {
            return <Menu triggerSubMenuAction={"hover"} onClick={(e) => console.log("click", e)}>
                <Menu.Item key="1">edge 1</Menu.Item>
                <Menu.Item key="2">Option 2</Menu.Item>
                <Menu.Item key="3">Option 3</Menu.Item>
                <SubMenu onTitleClick={(e) => e.domEvent.stopPropagation()} key="sub1" title="Submenu 1">
                    <Menu.Item key="5">Option 5</Menu.Item>
                    <Menu.Item key="6">Option 6</Menu.Item>
                </SubMenu>
            </Menu>
        }
        else if (targetType === "canvas") {
            return <Menu triggerSubMenuAction={"hover"} onClick={(e) => console.log("click", e)}>
                <Menu.Item key="1">canvas 1</Menu.Item>
                <Menu.Item key="2">Option 2</Menu.Item>
                <Menu.Item key="3">Option 3</Menu.Item>
                <SubMenu onTitleClick={(e) => e.domEvent.stopPropagation()} key="sub1" title="Submenu 1">
                    <Menu.Item key="5">Option 5</Menu.Item>
                    <Menu.Item key="6">Option 6</Menu.Item>
                </SubMenu>
            </Menu>
        }
        return <></>;
    }

    return createPortal(
        <Dropdown overlay={menu} visible={visible}>
            <div className="g6-contextmenu" style={{ position: 'absolute', left: x, top: y, zIndex: 1000 }} />
        </Dropdown>,
        document.body
    );
};
export default SorguYapContextMenu

            plugins: [
                {
                    type: 'contextmenu',
                    trigger: 'contextmenu', // 'click' or 'contextmenu'
                    getContent: (e) => {
                        const container = document.createElement('div');
                        document.body.appendChild(container);
                        const root = createRoot(container);

                        const closeContextMenu = () => {
                            root.unmount();
                            if (container.parentNode) {
                                container.parentNode.removeChild(container);
                            }
                        };
                        console.log("targetType",e.targetType)

                        root.render(<SorguYapContextMenu x={e.client.x} y={e.client.y} id={e.target.id} targetType={e.targetType} onClose={closeContextMenu} />);

                        return container;
                    },
                    enable: 'always',
                },
]