Set react state in high charts interactive map on click

const [externalState, setExternalState] = useState(null);
const options = {
    chart: {
      height: "60%", // Full height of the parent div
      // width: "100%",  // Full width of the Highcharts container
      events: {
        load: function() {
          // Hide tooltip on load
          this.tooltip.hide();
        }
      }
    },
    mapNavigation: {
      enabled: true,
      buttonOptions: {
        theme: {
          r: 8,
        },
        verticalAlign: 'bottom'
      }
    },
    series: [{
      type: 'map',
      mapData: mapDataWorld,
      data: data
      dataLabels: {
        enabled: true,
        useHTML: true,
        style: {
          textOutline: '1px contrast(black)',
        },
      },
      point: {
        events: {
          click: function() {
            setExternalReactState({this.data}); // THIS IS WHERE THE ISSUE IS
            this.series.chart.update({
              tooltip: {
                enabled: true
              }
            });
          },
          mouseOut: function() {
            this.series.chart.update({
              tooltip: {
                enabled: false
              }
            });
          }
        }
      }
    }],
    legend: {
      enabled: false
    },
    tooltip: {
      enabled: true,
      useHTML: true,
      style: {
        fontSize: 16,
      },
    },
  };

Above is my options for the HighCharts interactive map. In my current functionality, the tooltip does not appear unless you click on a part of the map. When I add the line setExternalReactState({this.data}); to series.point.events.click, it causes a rerender, and this.series no longer exists. this only has the property destroyed. How can I set externalState while maintaining this.series.chart.update?