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

从 React 组件的 Plot 入口开始，复现所提供的步骤：渲染一个系列，追加第二个系列，使用多个 Y 轴，并启用 xaxis.rangeslider。比较重新渲染前后 range-slider 手柄的层叠顺序；当存在多个绘图表示时手柄仍保持可见，即表示完成。