echarts dataZoom strange artifacts

I have been working on a custom echart. x axis is timeline and each category element has 2 x values, start and end.

The issue I seem to be having is when I try to use the dataZoom slider, I get weird corruption.
Some elements move, some are stationary.

Working MRE on codepen:
https://codepen.io/Michael-Weiss-the-styleful/pen/Ggqxjav

dataZoom: [ { type: "slider", filterMode: "none" //filterMode: "filter", } ]

If I set filterMode: filter I do not have the issue.
But when I do that, any element that has its second x position past the right hand side of the chart disappears.
So I have to use filterMode: none

It does the same thing in dataZoom 'slider' and 'inside'

I have tried:
updating to the latest echarts version 6.0.0
render: canvas and svg
sorted data by x category
animation: false,
realtime: false,

Maybe I do not have my data in the proper format.

Each element has:
2 'x' values, start and end
a category
and other misc data

I can't find much information on setting up this type of chart....

So my question is: What am I doing wrong? Can anyone point me in the right direction?