JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0px auto"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },

   
    legend: {

      symbolHeight: 1,
      symbolWidth: 1,
      symbolRadius: 0,
      useHTML: true,
      align: 'right',
      verticalAlign: 'top',
      itemWidth: 100,
      layout: 'vertical',
      x: 0,
      y: 100,
      
    },
    plotOptions: {

      pie: {
        showInLegend: true,
        dataLabels: {
          format: '<b>{point.y}</b>',

          style: {
            fontWeight: 'bold',
            color: 'white'
          }
        },
        point: {
          events: {
            legendItemClick: function() {
              return false;
            },
            mouseOver: function(e) {
            	alert("test");
              var series = this.series;
              console.log(series)
              for (var i = 0; i < series.data.length; i++) {
                var point = series.data[i];
                console.log(point)
                if (point == this) {
                  console.log('yes')
                  point.update({
                    color: series.chart.options.colors[this.index]
                  });
                } else {
                  point.update({
                    color: '#CCCCCC'
                  });
                }
              }

              return false;
            },
            mouseOut: function(e) {
            	alert("test2");
              var series = this.series;
              console.log(series)
              for (var i = 0; i < series.data.length; i++) {
                var point = series.data[i];
                point.update({
                  color: series.chart.options.colors[i]
                });

              }

              return false;
            }

          }
        },
        startAngle: 0,
        endAngle: 270,
      }
    },
    tooltip: {
      enabled: false,
      shadow: false
    },
    series: [{
      states: {
        hover: {
          enabled: false
        }
     ...