Violin and heatmap tandem hover events

I am trying to make a plot with a violin plot and heatmap on it to visualize some data. I am trying to make it so that when I hover over one point on one of the graphs, the corresponding point on the other is highlighted/indicated in some way. You can see the work I am trying to do in this example https://codepen.io/wonderwally/pen/zYLjqVW. I am using Plotly.js v1.58.5 (by adding https://cdn.plot.ly/plotly-latest.min.js as a source to my script).

The gist of my code is that I generate the 2D array for the heatmap and also include the pointNumber of the corresponding violin’s 1D array under the heatmap’s customdata property. The violin plot receives a similar treatment.

The violin plot is made with a 1D array and includes the pointNumber of the corresponding heatmap’s 2D array under the violin plot’s customdata property.

As an example, if the heatmap 2D array is

[
   [0.43, 0.50, 0.58], 
   [0.73, 0.18, 0.14]
]

and the violin plot’s 1D array is

[0.43, 0.50, 0.58, 0.73, 0.18,0.14]

the heatmap will have a customdata feature of

[0, 1, 2, 3, 4, 5, 6]

and the violin plot will have a customdata feature of

[[0, 0], [0, 1], [0, 2], [1, 0], [1, 1], [1,2]]

This is the section of code I am using to try and achieve the tandem hover event:

PLOTLY_GRAPHS.on('plotly_hover', function(eventdata) {
    if (eventdata.points[0].data.type === 'violin') {
        let violin_pointnum = eventdata.points[0].pointNumber;
        let heatmap_pointnum = eventdata.points[0].customdata;
            
        Plotly.Fx.hover(
        'plotly_graphs',
            [
                {curveNumber: 0, pointNumber:violin_pointnum},
                {curveNumber: 1, pointNumber:heatmap_pointnum},
            ],
            [
                'xy', 
                'x2y2',
            ]
        );         
    }

    if (eventdata.points[0].data.type === 'heatmap') {
        let violin_pointnum = eventdata.points[0].customdata;
        let heatmap_pointnum = eventdata.points[0].pointNumber;
                    
        Plotly.Fx.hover(
            'plotly_graphs',
            [
                {curveNumber: 0, pointNumber:violin_pointnum,},
                {curveNumber: 1, pointNumber:heatmap_pointnum,},
            ],
            [
                'xy',
                'x2y2',
            ]
        )
    }
});

As you can see in the example https://codepen.io/wonderwally/pen/zYLjqVW, if you hover over a point in the violin plot, the corresponding heatmap point is indicated, but there isn’t any hovertext over that same, hovered-over violin plot point. However, when you hover over the heatmap, the corresponding violin plot point isn’t shown.