xaxis values not updated on setState in React

[jashsayani]

xaxis values (chart.options.xaxis.categories) not updated on setState in React.

class ChartView extends React.Component {
  constructor(props) {
    super(props);

    const sharedOptions = MyCommonChartOptions;
    sharedOptions.chart.id = 'my-chart';

    this.state = {
      chart: {
        options: sharedOptions,
        series: []
      }
    };
  }

  componentDidMount() {
    fetch('https://api.domain.com/data/chartdata').then((response) => {
      response.json().then((parsedResponse) => {
        const { chart } = this.state;
        chart.series = parsedResponse.values; // WORKS! <<<
        chart.options.xaxis.categories = parsedResponse.dates; // Not updated in Chart! <<<

        this.setState({
          chart: chart
        });
      });
    });
  }

  render() {
    return (
      <Chart options={this.state.chart.options} series={this.state.chart.series} type="line" />
    );
  }
}

Going to a different React component view and coming back to this view shows the xaxis values correctly.