Range Slider - Slider handles gets overlapped by the plot lines.

Overall this is a good library. This have been most useful to me and my team. Recently I found a bug where the range slider handles gets overlapped by the plot representation when a re-render has happened on a chart with multiple Y axis. This become a huge issue when the range slider is filled with multiple plot representations. Like 5 or more.

Code to reproduce.

  const [chartData, setChartData] = useState<any[]>([]);
  const [chartLayout, setChartLayout] = useState<any>({});

 useEffect(() => {
    setChartLayout({
      ...,
      xaxis: {
        rangeslider: {
          autorange: true,
        },
      },
      yaxis: { title: "One" },
      yaxis2: {
        title: "Two",
        titlefont: { color: "rgb(148, 103, 189)" },
        tickfont: { color: "rgb(148, 103, 189)" },
        overlaying: "y",
        side: "right",
      },
    });
  }, []);
  
   useEffect(() => {
    setChartData([
      {
        x: [1, 2, 3],
        y: [40, 50, 60],
        name: "yaxis data",
        type: "scatter",
      },
    ]);
  }, []);

  const addSeries = () => {
    const existingArr = [...chartData];
    existingArr.push({
      x: [2, 3, 4],
      y: [4, 5, 6],
      name: "yaxis2 data",
      yaxis: "y2",
      type: "scatter",
    });
    setChartData(existingArr);
  };

  return (
    <Plot
            data={chartData}
            layout={chartLayout}
            revision={revisionNumber}
          />
  )

as above code describes its a pretty simple React component. This issue can only be reproduced to above scenario (or I only found this scenario). I have an initial data set for one plot in the state. Then I append another data set for another plot. So it should now draw two plots. It draws the two plots but as visible in the below video the range slider handles are getting overlapped. Also chart should have multiple Y axis.

I have tried to test this with having both plot data together for an initial render. Range slider works without the mentioned issue.

https://user-images.githubusercontent.com/17064184/124474253-f5f58d80-ddbd-11eb-84c6-fec0a78784d2.mp4

Inizia dal punto di ingresso Plot del componente React e riproduci la sequenza fornita: esegui il rendering di una serie, aggiungi una seconda serie, usa più assi Y e abilita xaxis.rangeslider. Confronta la sovrapposizione delle maniglie del range-slider prima e dopo il nuovo rendering; il lavoro è completato quando le maniglie rimangono visibili con più rappresentazioni del grafico.