How to synchronize two or more graphics with converFromPixel in same echarts.instance?

I have two dot graphics (scatter) and I need to move the mouse (mousemove) over one of them and pass the tooltip effect to the other. That is, when I move the mouse over series[0], the tooltip must also appear in series[1] and vice versa. I tried synchronizing the charts with chartUSe.getZr().on(...) but I couldn’t get it to work. Also, it wouldn’t be interesting to use echarts.connect to do this, as I need the charts to be in the same instance.

Code:

document.addEventListener('DOMContentLoaded', function() {

    // system
    const chartSystem = () => {

        const dfInit = () => {
            
            const groups = ['group1', 'group2', 'group3'];

            const data = [];

            for (let i = 0; i < 30; i++) {
                data.push(
                    [
                        (Math.random() * 101) | 0,
                        (Math.random() * 101) | 0,
                        groups[(Math.random() * groups.length) | 0]
                    ]
                )
            }
            return data;
        }

        return {
            "source": {
                "first": dfInit()
            }
        };

    }

    // send
    let pullDataset = [];

    const chartSend = () => {

        const { first } = chartSystem().source;

        pullDataset.push(
            {
                source: [
                    ["x1", "x2", "groups"],
                    ...first
                ]
            }
        )

    }

    chartSend();

    // frames
    const chartUse = echarts.init(document.getElementsByClassName('chart')[0]);

    function chartFrameSwitch0 () {

        const title0 = [
            {
                text: "convertFromPixel in same instance (chartUse)",
                left: 'center',
                textStyle: {
                    fontSize: 30,
                    color: "#242832"
                }
            }
        ];

        const tooltip0 = {
            trigger: "axis"
        };

        const grid0 = [
            {
                left: '5%',
                top: '12%',
                width: '40%',
                height: '35%'
            },
            {
                right: '5%',
                top: '12%',
                width: '40%',
                height: '35%'
            }
        ];

        const xAxis0 = [
            {
                type: 'value',
                gridIndex: 0
            },
            {
                type: 'value',
                gridIndex: 1
            }
        ];

        const yAxis0 = [
            {
                type: 'value',
                gridIndex: 0
            },
            {
                type: 'value',
                gridIndex: 1
            }
        ];

        const series0 = [
            {
                type: 'scatter',
                datasetIndex: 0,
                xAxisIndex: 0,
                yAxisIndex: 0,
                encode: {
                    x: 0,
                    y: 1
                }
            },
            {
                type: 'scatter',
                datasetIndex: 0,
                xAxisIndex: 1,
                yAxisIndex: 1,
                encode: {
                    x: 0,
                    y: 1
                }
            }
        ];

        const option = {
            title: title0,
            tooltip: tooltip0,
            grid: grid0,
            dataset: [pullDataset[0]],
            xAxis: xAxis0,
            yAxis: yAxis0,
            series: series0
        };

        chartUse.setOption(option);

    }

    chartFrameSwitch0();

    // Charts synchronize 
    chartUse.getZr().on('mousemove', function(params) {

        // Catch mousemove event
        let pointInGrid = [params.offsetX, params.offsetY];

        // series 0 interaction
        if (params.seriesIndex === 0) {

            let index = chartUse.convertFromPixel({ seriesIndex: 0 }, pointInGrid)[0];

            // Checks if the index is within the data range
            if (index >= 0 && index < pullDataset[0].source.length) {

                chartUse.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 1,
                    dataIndex: index
                });

            }

        } 
        
        // series 1 interaction
        else if (params.seriesIndex === 1) {

            let index = chartUse.convertFromPixel({ seriesIndex: 1 }, pointInGrid)[0];

            // Checks if the index is within the data range
            if (index >= 0 && index < pullDataset[0].source.length) {

                chartUse.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: index
                });

            }

        }
        
    });


});

<head>
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js'></script>
</head>
    
<div class='chart' style='width: 100%; height: 100vh;'></div>