Quiero crear un gráfico de dispersión, donde el color de la dispersión esté determinado por un valor, que se mostrará en un colorAxis como un degradado. Aquí está el jsfiddle del problema: https://jsfiddle.net/codelock/2b3fmnLw/13/ Como he creado el componente en reaccionar, estoy importando highcharts , highchartsReact y el módulo de mapa de heatmap en el componente y envolviendo Highcharts con mapa de calor como sigue:

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

Estoy agregando opciones en colorAxis de la siguiente manera y luego asignando la variable colorAxis en la propiedad colorAxis del gráfico.

 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', })

Y las opciones del gráfico siguen siendo las mismas que las del violín al que se hace referencia, pero los valores se asignan dinámicamente. El problema requiere que los datos sean seleccionados dinámicamente. Por ejemplo, la salida de violín actual muestra 2 personas: John y Gina. El usuario tiene la opción de seleccionar 10 nombres de la lista dada. No hay ningún error cuando se selecciona el primer grupo de personas. Todo rinde perfectamente. Después de anular la selección de la lista de personas por primera vez, si intento seleccionar o anular la selección de otra persona, la aplicación se bloquea con el siguiente error: TypeError: Cannot read property 'indexOf' of undefined . mensaje de error

Hasta ahora he probado:

1. reemplazando el mapa de coloraxis heatmap la importación
2. Si elimino el colorAxis por completo o asigno algún valor estático, funciona perfectamente.