Need help with hover event to trigger hover in other plot

Hi, I am trying to do a hover event where hovering a line in one plot triggers a hover in another plot where both traces has the same metadata. I have gotten it to recognize that the meta data is equal but I am getting an error saying:
plotly-latest.min.js:61 Uncaught TypeError: Cannot read properties of undefined (reading ‘c2p’)
at Object.e.exports [as hoverPoints] (plotly-latest.min.js:61)
at it (plotly-latest.min.js:61)
at plotly-latest.min.js:61
at plotly-latest.min.js:61
at l (plotly-latest.min.js:61)
at Object.r.throttle (plotly-latest.min.js:61)
at Object.r.hover (plotly-latest.min.js:61)
at s. (pen.js?key=pen.js-b242a24e-a6e6-9aaa-9d89-1818a017abdd:198)
at s.emit (plotly-latest.min.js:13)
at HTMLDivElement.t.emit (plotly-latest.min.js:61)

Here is a smaller version with random data in a codepen for you to look at! Thankful for any help with fixing my problem or maybe teaching me a better way to do it!