Highcharts US Bubble Map: Tooltip Issue When Hovering Over Bubbles

I'm using Highcharts in a React application to create a US Bubble Map. The version details for the relevant libraries are as follows:

"@highcharts/map-collection": "^2.1.0" "highcharts": "^11.1.0" "highcharts-react-official": "^3.2.0" "proj4": "^2.9.0"

The problem I'm encountering is that when I hover over a bubble on the map, the tooltip is displaying information for a different bubble. However, the click event on the bubble correctly logs the name of the region.

Here's the link to my component: BubbleChart.js on StackBlitz

Relevant Code:

import React, { useEffect, useState } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import hcMap from 'highcharts/modules/map';
import proj4 from 'proj4';
import mapDataUSA from '@highcharts/map-collection/countries/us/us-all.geo.json';
hcMap(Highcharts);

if (typeof window !== 'undefined') {
  window.proj4 = window.proj4 || proj4;
}

function BubbleChart(props) {
  const chartOptions = {
    chart: {
      backgroundColor: 'transparent',
      type: 'map',
      map: 'countries/us/us-all',
    },
    title: {
      text: null,
    },
    credits: {
      enabled: false,
    },
    mapNavigation: {
      enabled: false,
      enableButtons: false,
    },
    navigation: {
      buttonOptions: {
        enabled: false,
      },
    },
    credits: {
      enabled: false,
    },
    tooltip: {
      //   headerFormat: "",
      //   pointFormat: "lat: {point.lat}, lon: {point.lon}",
      formatter: function () {
        return (
          '<b>' +
          this.point.options.keyword +
          '</b><br/>' +
          this.point.options.z
        );
      },
    },
    legend: {
      enabled: false,
    },
    series: [
      {
        // Use the gb-all map with no data as a basemap
        name: 'US Map',
        mapData: mapDataUSA,
        borderColor: '#FFFFFF',
        nullColor: '#E4E7EC',
        showInLegend: false,
      },
      {
        // Specify points using lat/lon
        type: 'mapbubble',
        name: 'Locations',
        color: '#2E90FA',
        data: [
          // { z: 10, keyword: "Massachusetts", lat: 42.40, lon: -71.38},
          // { z: 20, keyword: "Washington", lat: 47.48, lon: -120.36},
          // { z: 30, keyword: "California", lat: 36.74, lon: -119.59},
          // { z: 40, keyword: "Oregon", lat: 43.83, lon: -120.38},
          { z: 79, keyword: 'North East', lat: 43.29, lon: -74.21 },
          { z: 49, keyword: 'South East', lat: 63.96, lon: -143.62 },
          { z: 26, keyword: 'Mid West', lat: 37.93, lon: -90.17 },
          { z: 21, keyword: 'South West', lat: 32.31, lon: -110.92 },
          { z: 15, keyword: 'West Coast', lat: 47.75, lon: -121.09 },
          { z: 19, keyword: 'Unassiged', lat: null, lon: null },
        ],
        cursor: 'pointer',
        point: {
          events: {
            click: function () {
              console.log(this.keyword);
            },
          },
        },
      },
    ],
  };

  return (
    <HighchartsReact
      containerProps={{ style: { height: 'auto', width: '100%' } }}
      highcharts={Highcharts}
      constructorType={'mapChart'}
      options={chartOptions}
    />
  );
}

export default BubbleChart;

Additional Details:

The tooltip displays information for the wrong bubble when hovering. The click event on the bubble correctly logs the name of the region. I'm using the latest versions of Highcharts and related libraries. I appreciate any insights or suggestions on resolving this tooltip issue. Thank you!

enter image description here

I'm currently working on visualizing data using the Highcharts library in a React application. I've implemented a Bubble Map to display geographic data. The version details for the relevant libraries are as follows:

"@highcharts/map-collection": "^2.1.0" "highcharts": "^11.1.0" "highcharts-react-official": "^3.2.0" "proj4": "^2.9.0"

While implementing this, I encountered an issue with the tooltips on the bubbles. When I hover over a bubble on the map, the tooltip is displaying information for a different bubble. However, the click event on the bubble correctly logs the name of the region.

Specific Questions:

Is there a known issue with tooltip rendering in the current version of Highcharts? Are there any specific configurations or adjustments that need to be made for tooltips in a Bubble Map scenario? I'm seeking insights or suggestions on how to resolve this tooltip issue and ensure that it displays information accurately when hovering over the bubbles.

Thank you for any assistance or guidance provided!

There is an issue with their latest version i have reported this bug in their github repository.

here is the link for the github issue in highcharts :- https://github.com/highcharts/highcharts/issues/20243

so for that i have used the highcharts version 10.3.3 in my react web application. It is working fine for me.