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

Beginne mit dem Plot-Einstiegspunkt der React-Komponente und reproduziere die vorgegebene Abfolge: Rendere eine Serie, füge eine zweite Serie hinzu, verwende mehrere Y-Achsen und aktiviere xaxis.rangeslider. Vergleiche die Ebenenreihenfolge der Range-Slider-Griffe vor und nach dem erneuten Rendern; abgeschlossen ist die Aufgabe, wenn die Griffe bei mehreren Plot-Darstellungen sichtbar bleiben.