Свеча ApexChart не перерисовывается при каждом изменении состояния

У меня есть компонент диаграммы, который получает данные диаграммы из двух источников: первый предоставляет исторические данные свечей каждую минуту. Второй предоставляет данные текущей свечи в реальном времени. Оба обновляют объект серии через setState.

Проблема в том, что только первый источник обновляет диаграмму.

Я ожидаю, что после того, как второй источник отправит текущие данные свечей и я обновлю состояние, последняя свеча обновится на графике, но это не так. Он не двигается. Хотя рендеринг запускается после обоих обновлений (из первого и второго источника), которые я могу искать в выводе консоли. Также я вижу в журнале, что this.state.series имеет точно такой же формат после обоих типов обновлений.

Вот код моего компонента диаграммы:

import React from "react";
import Chart from "react-apexcharts";
import moment from "moment";

export default class ChartComponent extends React.Component {
constructor(props) {
  super(props);

  this.state = {
      series: [{data:[]}],
      options: {chart: {id: "basic-bar"}}
    }
}

componentDidMount() {     
  this.startEventSource();
}

startEventSource = ()=> {
  this.eventSource = new EventSource(`http://localhost:9000/candleStream`);
  this.eventSource.onmessage = e => this.updateChart(JSON.parse(e.data), "Minute");

  this.eventSource2 = new EventSource(`http://localhost:9000/priceStream`);
  this.eventSource2.onmessage = e => this.updatePrice(JSON.parse(e.data))         
}        

updatePrice = (newCandleData) => {

  var candleData = newCandleData.split(";");
  let momentWithoutSeconds = moment(parseInt(candleData[4])).seconds(0).milliseconds(0).valueOf();      
  let candle = [momentWithoutSeconds, parseFloat(candleData[0]), parseFloat(candleData[1]), parseFloat(candleData[2]), parseFloat(candleData[3]) ]    
  let newCandleList = this.state.series[0].data;

  if(newCandleList.filter(c => c[0] == momentWithoutSeconds).length == 0) {        
    newCandleList.push(candle);        

  } else {
    newCandleList[newCandleList.length - 1] = candle;
  }    

  this.updateChart([{data:newCandleList}], "Price");      
}    

updateChart = (data, source) => {                 
  this.setState({series: data},  console.log(source, this.state.series));
}  

render() {
  console.log("render triggered!")
  return (
    <div className="app">
      <div className="row">
        <div className="mixed-chart">
          <Chart
            options={this.state.options}
            series={this.state.series}
            type="candlestick"
            width="1000"
          />
        </div>
      </div>
    </div>
  );  
}
}

А вот пример вывода на консоль, где видна структура серии:

Может ли кто-нибудь сказать мне, что я делаю не так?

РЕДАКТИРОВАТЬ: диаграмма обновляется, пока я изменяю размер окна браузера.