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

Comece pelo ponto de entrada Plot do componente React e reproduza a sequência fornecida: renderize uma série, adicione uma segunda série, use vários eixos Y e habilite xaxis.rangeslider. Compare a sobreposição das alças do range-slider antes e depois da nova renderização; está concluído quando as alças permanecem visíveis com múltiplas representações do gráfico.