Highcharts Bar Chart Not plotting all the series

Question

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

"highcharts": "10.3.3", "highcharts-react-official": "^3.2.0"

The problem I'm encountering is that it is not plotting all the series data in the bars and encountered a problem Uncaught TypeError: coordinates must be finite numbers

This is the screenshot of image how it is looking

Here's the link to my component: https://react-playground-practice-ed82sn.stackblitz.io

Relevant Code:

const SERIES_DATA = [
  ['CA 10.4%', 25419],
  ['NY 7.7%', 18850],
  ['FL 7.2%', 17679],
  ['TX 6.9%', 16871],
  ['PA 4.7%', 11425],
  ['OH 4.1%', 9954],
  ['IL 3.8%', 9225],
  ['MI 3.5%', 8523],
  ['NC 2.8%', 6825],
  ['MA 2.7%', 6641],
  ['NJ 2.7%', 6578],
  ['WA 2.6%', 6382],
  ['GA 2.6%', 6362],
  ['MN 2.3%', 5657],
  ['IN 2.2%', 5411],
  ['VA 2.2%', 5320],
  ['TN 2.2%', 5268],
  ['WI 2.0%', 4991],
  ['AZ 2.0%', 4962],
  ['MD 2.0%', 4888],
  ['MO 1.8%', 4419],
  ['CO 1.6%', 3974],
  ['KY 1.6%', 3810],
  ['OR 1.4%', 3318],
  ['LA 1.3%', 3201],
  ['SC 1.3%', 3183],
  ['AL 1.3%', 3127],
  ['CT 1.3%', 3092],
  ['IA 0.9%', 2170],
  ['OK 0.8%', 2073],
  ['AR 0.8%', 1909],
  ['KS 0.7%', 1790],
  ['NV 0.7%', 1768],
  ['NE 0.7%', 1675],
  ['UT 0.7%', 1610],
  ['MS 0.6%', 1474],
  ['ME 0.6%', 1460],
  ['WV 0.5%', 1293],
  ['ID 0.5%', 1283],
  ['NM 0.4%', 1086],
  ['NH 0.4%', 1046],
  ['MT 0.4%', 1002],
  ['PR 0.4%', 980],
  ['SD 0.4%', 893],
  ['DE 0.3%', 851],
  ['HI 0.3%', 823],
  ['DC 0.3%', 781],
  ['ND 0.3%', 679],
  ['RI 0.3%', 655],
  ['VT 0.2%', 546],
  ['AK 0.2%', 421],
  ['0 0.2%', 413],
  ['WY 0.1%', 296],
  ['GU 0.0%', 24],
  ['VI 0.0%', 13],
  ['AE 0.0%', 11],
  ['BC 0.0%', 6],
  ['AP 0.0%', 4],
  ['MP 0.0%', 3],
  ['QC 0.0%', 3],
  ['AS 0.0%', 2],
  ['ON 0.0%', 2],
  ['AA 0.0%', 1],
  ['UK 0.0%', 1],
  ['NP 0.0%', 1],
];

const DISTRIBUTION_CHART_OPTIONS = {
  chart: {
    type: 'bar',
    backgroundColor: '#F9FAFB',
  },
  title: {
    text: null,
  },
  subtitle: {
    text: null,
  },
  navigation: {
    buttonOptions: {
      enabled: false,
    },
  },
  xAxis: {
    type: 'category',
    title: {
      text: null,
    },
    lineColor: 'transparent',
  },
  yAxis: {
    labels: {
      enabled: false,
    },
    title: {
      text: null,
    },
    gridLineWidth: 0,
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true,
      },
    },
    series: {
      label: {
        enabled: false,
      },
      states: {
        hover: {
          enabled: false,
        },
      },
      borderRadius: 5,
      pointWidth: 8,
      groupPadding: 0,
      pointPadding: 0,
    },
  },
  legend: {
    enabled: false,
  },
  tooltip: {
    enabled: false,
  },
  credits: {
    enabled: false,
  },
  series: [
    {
      name: null,
      data: [
        ['VA 21.9%', 99600],
        ['IN 14.6%', 68400],
        ['WA 13.1%', 59578],
        ['AL 11.7%', 53210],
        ['RI 11.6%', 52756],
        ['ME 7.4%', 33654],
        ['OR 6.2%', 28197],
        ['CA 5.7%', 25923],
        ['AK 5.2%', 23649],
        ['GA 4.2%', 19101],
        ['NV 2.2%', 10005],
        ['FL 1.4%', 6367],
        ['PA 0.3%', 1364],
      ],
    },
  ],
};

import React, { useState, useEffect } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
NoDataToDisplay(Highcharts);

const HighchartBarChart = (props) => {
  const { chartOptions, seriesData = [], seriesName = null } = props;
  const [updatedChartOptions, setUpdatedChartOptions] = useState({
    ...chartOptions,
    lang: {
      noData: 'No data to display',
    },
    noData: {
      style: {
        fontWeight: 'bold',
        fontSize: '15px',
        color: '#303030',
      },
    },
    series: seriesName
      ? [
          {
            name: seriesName,
            data: [...seriesData],
          },
        ]
      : seriesData?.map((series) => {
          let { name, data } = series;
          return {
            name: name,
            data: [...data],
          };
        }),
  });

  useEffect(() => {
    setUpdatedChartOptions({
      ...chartOptions,
      lang: {
        noData: 'No data to display',
      },
      noData: {
        style: {
          fontWeight: 'bold',
          fontSize: '15px',
          color: '#303030',
        },
      },
      series: seriesName
        ? [
            {
              name: seriesName,
              data: [...seriesData],
            },
          ]
        : [...seriesData],
    });
  }, [chartOptions, seriesData]);

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

export default HighchartBarChart;

I am trying to show all the states with counts in highchart bar chart but it is not showing all the data in that and it is overlapping the data and showing all the data count is near by about 65 and it is showing the labels count is 22 in y-axis.

I am expecting that it will show all the series data in that bar chart. When i hover on the chart it is showing error Uncaught TypeError: coordinates must be finite numbers

Error on Hovering Bar Chart