strange jumps when zooming on real time chart

Hi,

is there a way to fix this?
not sure if it's related to react-plotly or plotly.js
The chart jumps back and forth in a confusing way while scrolling forward.
The faster I scroll the more extreme it jumps back.
When using the toolbar, it behaves normal.

https://user-images.githubusercontent.com/45887282/110695326-a32a1180-81e1-11eb-8481-6e54cc9a2719.mp4

    useEffect(() => {

        setInterval(()=>{

            $_state(($:any) => {

                console.log($)

                const _x = $.data[0].x
                const _y = $.data[0].y

                const _ymin = _y[_y.length-1] - gaussianRand()/100
                const _ypls = _y[_y.length-1] + gaussianRand()/100

                return {...$, data: [
                    {
                        ...$.data[0],
                        x: [..._x, _x[_x.length-1]+0.1],
                        y: [..._y, ~~(Math.random()*2) ? _ymin : _ypls],
                    }
                ]}

            })

        }, 100)
        
    },[])


    return (
        <Plot 
            className={jss.root} 
            data={_state.data}
            layout={_state.layout}
            config={_state.config}
            onInitialized={figure => $_state(figure)}
            onUpdate={figure => $_state(figure)}
        />
      );

    const [_state, $_state] = useState({
        data:[
        {
            type: 'scattergl',
            mode: 'markers',
            marker: {
                color : 'rgba(255, 255, 255, 0)',
                line: {
                    width: 1,
                    color: ['rgba(255, 255, 255, 0.5)', 'rgba(255, 255, 0, 1)']
                }
            },
            x: [0],
            y: [0],
        }]
    , layout: {
        title: '-',

        font: {
            family:'IBM Plex Mono',
            size:10,
        },
        margin: {
            l: 50,
            r: 50,
            b: 50,
            t: 50,
            pad: 4
          },
        plot_bgcolor: 'rgba(255,255,255,0)',
        paper_bgcolor: 'rgba(255,255,255,0)',
        yaxis: {
            tickcolor: 'rgba(255,255,255,0.1)',
            tickwidth: 1,
            
            gridcolor: 'rgba(255,255,255,0.1)',
            gridwidth: 1,
            
            zerolinecolor: 'rgba(255,255,255,0.1)',
            zerolinewidth: 1,
          },
          xaxis: {
            tickcolor: 'rgba(255,255,255,0.1)',
            tickwidth: 1,

            zerolinecolor: 'rgba(255,255,255,0.1)',
            zerolinewidth: 1,

            gridcolor: 'rgba(255,255,255,0.1)',
            gridwidth: 1,
          
          },
    }, frames: [], config: {
        scrollZoom:true,
        
    }})

Bắt đầu với ví dụ React được cung cấp, sử dụng biểu đồ scattergl của Plotly, dữ liệu x/y được nối thêm nhanh chóng và scrollZoom được bật. So sánh thao tác cuộn bằng con lăn với hành vi của thanh công cụ và sử dụng bản ghi được liên kết để tái hiện các lần nhảy lùi; hoàn tất khi thao tác cuộn về phía trước vẫn ổn định trong lúc dữ liệu thời gian thực được nối thêm.