Calling setState in animation:onComplete function makes legend items unclickable

[cherylfg]

I have a line chart with a legend. If I setState in the animation:onComplete function, the legend items are no longer clickable. They are clickable during the animation (I tested this by slowing down the animation duration to 3000). But as soon as the animation is complete, the lines can no longer be hidden by clicking on the corresponding legend item.

Here is a simplified fiddle: (https://jsfiddle.net/nkjfmsqL/1/)

Simplified code:

class MyChart extends React.Component {
  state = {
    myStateVar:false,
  };
  
  render() {
    const data = {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",],
      datasets: [{
          data: [100, 200, 300, 400, 500, 600, 700],
          label:"blue",
          borderWidth: 2,
          borderColor: "blue",
      }, {
          data: [700,600,500,400, 300, 200, 100,],
          label:"red",
          borderWidth: 2,
          borderColor: "red",
      }]
    };

    const options = {
      animation: {
      	onComplete: ()=>{
          this.setState({myStateVar:true});
          console.log("Can no longer click on legend item to hide line");
        }
      },
    };
    return (
      <div className="chart">
         <Line data={data} options={options} ref="chart" />
      </div>
    );
  }
};