I have a Highcharts graph on my React page and I redraw it after getting data by updating the state hook. This works well in development mode without any issues.

However, after npm run build and starting the application I get the error:

TypeError: Cannot read properties of undefined (reading 'activeDataLabelStyle')

If I leave the page and come back, the graph updates without any problems on selection but will still throw an error if I select to display after refreshing the page.

const [options, setOptions] = useState({
  title: {
    text: 'Speed of vehicle over time',
  },
  subtitle: {
    text: 'Select an area on the chart to zoom in.',
  },

  chart: {
    zoomType: 'x',
  },
  series: [
    {
      data: [],
    },
  ],
  xAxis: {
    type: 'datetime',
    labels: {
      formatter: function () {
        return Highcharts.dateFormat('%H:%M', this.value);
      },
    },
    title: {
      text: 'Time',
    },
  },
  yAxis: {
    title: {
      text: 'Speed (m/s)',
    },
  },
});

async function handleSelect(selected, setLoading) {
  const journey = await axios.get('/api/getJourney?id=' + selected.id);

  console.log(journey.data);

  setOptions({
    series: [
      {
        data: journey.data,
        name: 'Vehicle ' + selected.id,
      },
    ],
  });

  setLoading(false);
}