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

Commencez par le point d’entrée Plot du composant React et reproduisez la séquence fournie : affichez une série, ajoutez une deuxième série, utilisez plusieurs axes Y et activez xaxis.rangeslider. Comparez la superposition des poignées du range-slider avant et après le nouveau rendu ; c’est terminé lorsque les poignées restent visibles avec plusieurs représentations du graphique.