I want to create a scatter chart, where the color of the scatter is determined by a value, which will be displayed on a colorAxis as a gradient. Here is the jsfiddle of the problem:https://jsfiddle.net/codelock/2b3fmnLw/13/ As I have created the component in react, I am importing highcharts, highchartsReact, and heatmap module in the component and wrapping the Highcharts with heatmap like follows:

import HighchartsReact from 'highcharts-react-official'
import { Grid, Typography } from '@material-ui/core'
import hm from 'highcharts/modules/heatmap'

hm(Highcharts)

I am adding options in the colorAxis as follows and then assigning the colorAxis variable in the colorAxis property of the chart.

colorAxis.push({
          id: selected.mixCode,
          min: colorArray?.[0],
          max: colorArray?.[colorArray.length - 1],
          minColor: colorSet[0],
          maxColor: colorSet[3],
          marker: null,
          showInLegend: true,
          marginRight: '10px',
        })

And the chart options stays the same as the referenced fiddle, but values are assigned dynamically. The problem requires the data to be dynamically selected. For example, the current fiddle output shows 2 people - John and Gina. The user has the option to select any 10 names from the given list. There is no error when the first set of people are selected. Everything renders perfectly. After I deselect from the people list for the first time, if I try to select or deselect another person, the app crashes with following error: TypeError: Cannot read property 'indexOf' of undefined. error message

So far I have tried:

1. replacing heatmap with coloraxis module while importing
2. If I remove the colorAxis entirely or assign some static value, it works perfectly.