Can't listen dom events on dom type node #3342

<!-- ⚠️ ⚠️ ⚠️ 注意：请使用下面的链接来新建 issue： ⚠️ ⚠️ ⚠️ https://antv-issue-helper.surge.sh 不是用上面的链接创建的 issue 会被立即关闭。 -->

<!-- ⚠️ ⚠️ ⚠️ IMPORTANT: Please use the following link to create a new issue: ⚠️ ⚠️ ⚠️ https://antv-issue-helper.surge.sh If your issue was not created by using the link above, it will be closed immediately. -->

const TestData = {
    nodes: [
        {id: 'Tripod', type: '', is_company: true},
        {id: 'Laura', type: '', has_chart: true, trendData, style: {
      fill: '#e6f7ff',
    },},
        {id: 'Xenia', type: '', has_chart: true, trendData, style: {
      fill: '#e6f7ff',
    },},
        {id: 'Mellisa', type: '',          
            style : {
                keyshape: {
                    size: 30,
                    stroke: '#1a94db'
                },
                icon: {
                    type: 'image',
                    value: G2.src,
                    size: [20, 20],
                    clip: {
                        r: 10,
                    },
                    fill: '#000000',
                    stroke: '#1a94db',
                },
            }},
        {id: 'Sergo', type: '', style : {
            keyshape: {
                size: 30,
                stroke: '#1a94db'
            },
            icon: {
                type: 'image',
                value: G2.src,
                size: [20, 20],
                clip: {
                    r: 10,
                },
                fill: '#000000',
                stroke: '#1a94db',
            },
        }},
        {
            id: 'node1',
            x: 10,
            y: 100,
            type: '',
            can_dom: true,
            label: 'Homepage',
            size: [120, 120],
        },
        {
            id: 'node2',
            x: 200,
            y: 100,
            can_dom: true,
            type: '',
            label: 'Subpage',
            size: [120, 120],
        },
    ],
    edges: [
        {source: 'Tripod', target: 'Laura', value: 1},
        {source: 'Tripod', target: 'Xenia', value: 1},
        {source: 'Tripod', target: 'Mellisa', value: 1},
        {source: 'Tripod', target: 'Sergo', value: 1},
        {source: 'Tripod', target: 'node1', value: 1},
        {source: 'Tripod', target: 'node2', value: 1},
    ]
};

G6.registerNode('dom-node',
    {
        draw: (cfg:any, group:any) => {
            const stroke = cfg.style ? cfg.style.stroke || '#5B8FF9' : '#000';
            const shape = group.addShape('dom', {
                attrs: {                    
                    width: cfg.size[0],
                    height: cfg.size[1],
                    x: 10,
                    y: 10,
                    html: `
                        <div id=${
                            cfg.id
                        } class='dom-node' style="background-color: #fff; cursor: move; border: 2px solid ${stroke}; border-radius: 5px; width: ${
                            cfg.size[0] - 5
                        }px; height: ${cfg.size[1] - 5}px; display: flex;flex-direction: column;">
                            <div style="height: 40px; width: 100%; background-color: #CDDDFD; ">
                                <img alt="" style="line-height: 100%; margin-left: 7px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" />  
                            </div>
                            <span style="margin:auto; padding:auto; color: #5B8FF9;">${cfg.label}</span>
                            <input type="text" class="form-input" style="" />
                        </div>
                    `,
                },                
                draggable: true,
            });
            return shape;
        },
    },
    'single-node'
);

TestData.nodes.forEach(node => {  
    if(node?.can_dom) node.type = 'dom-node';
    else {
        node.type = 'circle;
    }
});

const CustomNodes = () => {
 const minimap:any = new G6.Minimap({
        size: [ 100, 100 ],
        className: "minimap",
        type: 'delegate'
    });

    useEffect(() => {

        let graph = new G6.Graph({
            container: 'mountNode',
            width: window.innerWidth,
            height: window.innerHeight,
            modes: {
                default: [ 
                    'drag-node', 'zoom-canvas', 'drag-canvas', 'collapse-expand-combo',
                    {
                        type: 'collapse-expand-group',
                        trigger: 'click',
                    },                                        
                ],
            },
            plugins: [minimap],
            renderer: 'svg',
            defaultNode: {
                labelCfg: {
                    position: 'bottom',
                    offset: 10,
                    style: {
                        fill: '#fff'
                    }
                },
                style: {
                    fill: 'none',
                    stroke: '#c14e34',
                    lineWidth: 1,
                },
                icon: {
                    show: true,
                    width: 25,
                    height: 25,
                    img: LocationCity, // The image url of the icon                    
                },
            },
            defaultEdge: {
                labelCfg: {
                    style: {
                        fill: '#fff',
                        color: 'white'
                    },
                    autoRotate: true
                }
            },
            nodeStateStyles: {
                // The node style when the state 'hover' is true
                hover: {
                    fill: 'lightsteelblue',
                },
                // The node style when the state 'click' is true
                click: {
                    stroke: '#000',
                    lineWidth: 3,
                },
            },
            // The edge styles in different states
            edgeStateStyles: {
                // The edge style when the state 'click' is true
                click: {
                    stroke: 'steelblue',
                },
            },
            // Layout
            layout: {               
                type: 'gForce'
            },
        });         

        graph.data(TestData);
        graph.render()

        const bindClickListener = () => {
            const domNodes = document.getElementsByClassName('dom-node');
            const inputNodes = document.getElementsByClassName('form-input');
            console.log(domNodes)
            console.log(inputNodes)
            for (let i = 0; i < domNodes.length; i++) {
                const dom = domNodes[i];            
                dom.addEventListener('click', (e:any) => {
                    console.log('sgdfgfg')
                    listener(dom);
                });
            }
            for (let k = 0; k < inputNodes.length; k++) {
                const dom_input = inputNodes[k];
                dom_input.addEventListener('input', (e:any) => {
                    console.log(e.target.value)
                });
            }
        };

        bindClickListener();
        return () => {
            graph.off('afterupdateitem', bindClickListener);
            graph.off('afterrender', bindClickListener);
        }
}, [])

return (
        <div id="g6-neo-container">           
            <div className="g6Test">
                <div>
                    <div id="mountNode"></div>
                </div>                
            </div>
        </div>
);

I'm using next js. I'm writing this binding function after graph.render so we can get dom event. But, I can't be able to listen the input event on input type text added on the dom node. Can anyone help me with this? Is there any other way to add html or react component to node and handle events?