React ApexCharts component only renders data in first chart

Question

I am using react-apexcharts to visualize some data. My chart components are generically fed the data in the parent component. I have 3 charts all in the same component. The first component renders correctly but the second and third chart components only appear to render a single point.

The data series is all in the same format: [{"seriesName': [['datetime1', point1], ['datetime2', point2], ['datetime3', point3], ....]}]. I feed the data into the Card components like this, as the initial data array has 3 items (one for each chart):

<Grid item xs={3} margin='15px' >
    <ASGCard chartData={chartData[0]} data={data[0]} />
</Grid>
<Grid item xs={3} margin='15px' >
    <ASGCard chartData={chartData[1]} data={data[1]} />
</Grid>
<Grid item xs={3} margin='15px'>
    <ASGCard chartData={chartData[2]} data={data[2]} />
</Grid>

And then into the Chart components:

<ASGChart marginRight='10px' chartData={chartData} />

The code for the Chart components looks like this:

import React, { useEffect, useState } from "react";
import Chart from "react-apexcharts"

const ASGChart = ({ chartData }) => {
    const [series, setSeries] = useState(
        [{
                name: Object.keys(chartData)[0],
                data: Object.values(chartData)[0]
        }]);
 
    const [selection, setSelection] = useState('last_week');
    const [options, setOptions] = useState(
           {
            chart: {
                id: 'area-datetime',
                type: 'area',
                height: 300,
                zoom: {
                    autoScaleYaxis: true
                }
            },
            dataLabels: {
                enabled: false
            },
            markers: {
                size: 0,
                style: 'hollow',
            },
            xaxis: {
                type: 'datetime',
                min: new Date().getTime(),
                tickAmount: 6,
            },
            yaxis: {
                showForNullSeries: true,
                min: 0,
                forceNiceScale: false,
                floating: false,
                decimalsInFloat: 1, 
            },
            tooltip: {
                x: {
                    format: 'dd MMM yyyy hh:mm:ss'
                }
                },
                fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0.7,
                    opacityTo: 0.9,
                    stops: [0, 100]
                }
            },
        }
    );

    useEffect(() => {
        console.log(selection);
        console.log("ChartData");
        console.log(Object.values(chartData)[0]);
        updateData('last_week');
    }, []);

    function updateData(timeline) {
        setSelection(timeline);      
        switch (timeline) {
            case 'last_day':
            ApexCharts.exec(
              'area-datetime',
              'zoomX',
              new Date(new Date().setDate(new Date().getDate() - 1)).getTime(),
          
            )
            break
          case 'three_days':
            ApexCharts.exec(
              'area-datetime',
              'zoomX',
              new Date(new Date().setDate(new Date().getDate() - 3)).getTime(),
              new Date().getTime()
            )
            break
          case 'last_week':
            ApexCharts.exec(
              'area-datetime',
              'zoomX',
              new Date(new Date().setDate(new Date().getDate() - 7)).getTime(),
              new Date().getTime()
            )
            break
          default:
        }
    }

    return (
      <div className="app">
        <div className="row">
          <div className="mixed-chart">
            <div className="toolbar">
                <button id="last_day"           
                    onClick={()=>updateData('last_day')} className={ (selection==='last_day' ? 'active' : '')}>
            1Day
                </button>
                &nbsp;
                <button id="three_days"
                    onClick={()=>updateData('three_days')} className={ (selection==='three_days' ? 'active' : '')}>
                3Days
                </button>
            &nbsp;
                <button id="last_week"
                onClick={()=>updateData('last_week')} className={ (selection==='last_week' ? 'active' : '')}>
                1Week
                </button>
                &nbsp;
            </div>
            <Chart
              options={options}
              series={series}
              type="area"
              width={350}
              height={300}
            />
            <br />
          </div>
        </div>
      </div>
    );
};

export default ASGChart;

From reading the React ApexCharts Github documentation, it looks like this problem, might be related to the options configuration, but I am not quite sure how to fix it:

✅ Do this
this.setState({
  options: {
    ...this.state.options,
    xaxis: {
      ...this.state.options.xaxis,
      categories: ['X1', 'X2', 'X3']
    }
  }
})

❌ Not this

this.setState({
  options.xaxis.categories: ['X1', 'X2', 'X3']
})

Any suggestions on how to fix this issue? Note: If I comment out the first chart component/card, the second one renders fine, but the third chart does not draw.