React-plotly: Sliding is slow in time series range slider with selectors

I am trying to implement a time series graph with a range slider with selectors referring the example in the link(https://plotly.com/javascript/range-slider/).The example is working properly and sliding speed is as expected. But when I implement it inside a react component using react-plotly, the slider is very slow and it seems there is an issue with the sliding part. Can anyone help me to find and fix the issue.

import React, { Component } from "react";

// reactstrap components
import { Row } from "reactstrap";
import Plotly from "plotly.js"
import createPlotlyComponent from 'react-plotly.js/factory';
const Plot = createPlotlyComponent(Plotly);

class Graph extends Component {
  constructor(props) {
      super(props);
      this.state={
        x: [],
        y: [],
        y2: []
      }
      this.processData = this.processData.bind(this);
  }

  componentDidMount() {
    this.processData();
  }

  processData() {
    let rawData=[
        {
            date: '2019-1-9',
            recall: '0.1',
            percentage: '60'
        }, {
            date: '2019-6-4',
            recall: '0.27',
            percentage: '80'
        }, {
            date: '2019-11-24',
            recall: '0.3',
            percentage: '67'
        }, {
            date: '2019-12-9',
            recall: '0.904',
            percentage: '68'
        }, {
            date: '2020-1-2',
            recall: '0.8',
            percentage: '67'
        }, {
            date: '2020-1-12',
            recall: '0.19',
            percentage: '90'
        }
    ];
    let x=[];
    let y=[];
    let y2=[];
    rawData.forEach(function(datum, i) {
        const splits = datum['date'].split('-');
        x.push(new Date(splits[0], splits[1]-1, splits[2]));
        y.push(datum['recall']);
        y2.push(datum['percentage']);
    });
    this.setState({x: x});
    this.setState({y: y});
    this.setState({y2: y2});
  }

  render() {
    let selectorOptions = {
      buttons: [{
        step: 'month',
        stepmode: 'backward',
        count: 1,
        label: '1m'
      }, {
        step: 'month',
        stepmode: 'backward',
        count: 6,
        label: '6m'
      }, {
        step: 'year',
        stepmode: 'todate',
        count: 1,
        label: 'YTD'
      }, {
        step: 'year',
        stepmode: 'backward',
        count: 1,
        label: '1y'
      }, {
        step: 'all',
      }],
    };
    return (
      <Plot
        data={[
          {
            x: this.state.x,
            y: this.state.y,
            mode: 'lines',
            name: 'recall'
          }, {
            x: this.state.x,
            y: this.state.y2,
            mode: 'lines',
            name: 'percentage',
            yaxis: 'y2',
          }
        ]}
        layout={{
          autosize: true,
          xaxis: {
            rangeselector: selectorOptions,
            rangeslider: {visible:true},
          },
          yaxis: {title: 'recall'},
          yaxis2: {
            title: 'percentage',
            titlefont: {color: 'rgb(148, 103, 189)'},
            tickfont: {color: 'rgb(148, 103, 189)'},
            overlaying: 'y',
            side: 'right'
         }
        }}
        useResizeHandler={true}
        style={{width: "100%", height: "100%"}}
        showSendToCloud={true}
      />
    );
  }
}

export default Graph;