How to use the highcharts.charts function in highcharts

.addEventListener(eventType, function (e) {
          var chart, point, i, event;

          for (i = 0; i < Highcharts.charts.length; i = i + 1) {
            chart = Highcharts.charts[i];
            if (chart) {
              // Find coordinates within the chart
              event = chart.pointer.normalize(e);
              // Get the hovered point
              point = chart.series[0].searchPoint(event, true);
              if (point) {
                point.highlight(e);
              }
            }
          }
        });
    });

.addEventListener(eventType, function (e) {
          var chart, point, i, event;

          for (i = 0; i < Highcharts.charts.length; i = i + 1) {
            chart = Highcharts.charts[i];
            if (chart) {
              // Find coordinates within the chart
              event = chart.pointer.normalize(e);
              // Get the hovered point
              point = chart.series[0].searchPoint(event, true);
              if (point) {
                point.highlight(e);
              }
            }
          }
        });
    });

H.syncExtremes = function(e) {
    var thisChart = this.chart;

    if (e.trigger !== "syncExtremes") {
      // Prevent feedback loop
      Highcharts.each(Highcharts.charts, function(chart) {
        if (chart && chart !== thisChart) {
          if (chart.xAxis[0].setExtremes) {
            // It is null while updating
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
              trigger: "syncExtremes"
            });
          }
        }
      });
    }
  };
})(Highcharts);

public reflowWidgets() {

    Highcharts.charts.forEach(chart => {

      // ERROR TypeError: Cannot read property 'reflow' of undefined
      if (chart) {
        chart.reflow();
      }

    });

  }

export const BaseSpectraViewer = memo(function BaseSpectraViewer({
  data,
  tooltip,
  yAxis,
  xAxis,
  exNorm,
  chartOptions,
  ownerInfo,
  hidden,
}) {
  const windowWidth = useWindowWidth()
  let height = calcHeight(windowWidth) * (chartOptions.height || 1)

  const hChart = Highcharts.charts[0]
  let legendHeight
  if (hChart) {
    legendHeight = Highcharts.charts[0].legend.legendHeight || 0
    height += legendHeight
  }

  const owners = [...new Set(data.map(item => item.owner.slug))]
  const numSpectra = data.length
  const exData = data.filter(i => i.subtype === "EX" || i.subtype === "AB")
  const nonExData = data.filter(i => i.subtype !== "EX" && i.subtype !== "AB")
  return (
    <div height="" style="{{">
      </div>

unbind();
              }
          });
          handlers.length = 0;
      }

      handlers.push(Highcharts.addEvent(document, 'mousemove', drag));
      handlers.push(Highcharts.addEvent(document, 'touchmove', drag));
      handlers.push(Highcharts.addEvent(document, 'mouseup', unbindAll));
      handlers.push(Highcharts.addEvent(document, 'touchend', unbindAll));
    };

  }

  for (let i = 0; i < Highcharts.charts.length; i = i + 1) {
    chart = Highcharts.charts[i];
    if(chart.options.chart.type === 'scatter3d'){
      Highcharts.addEvent(chart.container, 'mousedown', dragStart(chart));
      Highcharts.addEvent(chart.container, 'touchstart', dragStart(chart));

    }
  }
}, 1000); //1000 ms is totally arbitrary and really a hack to make sure the event binders occur after charts are loaded

element.bind('mousemove touchmove touchstart', function (e) {
            let chart, i, event, points;

            for (i = 0; i < Highcharts.charts.length; i++) {
              chart = Highcharts.charts[i];
              if (chart && chart.pointer) {
                if (e.originalEvent) {
                  event = chart.pointer.normalize(e.originalEvent);
                } else {
                  event = chart.pointer.normalize(e);
                }
                points = _.map(chart.series, (serie: any) => {
                  return serie.searchPoint(event, true);
                });
                points = _.filter(points, function (point) {
                  return point;
                });

                (e as any).points = points;
                if (points.length && points[0] && points[0].series.area) {

element.bind('mousemove touchmove touchstart', function (e) {
            let chart, i, event, points;

            for (i = 0; i < Highcharts.charts.length; i++) {
              chart = Highcharts.charts[i];
              if (chart && chart.pointer) {
                if (e.originalEvent) {
                  event = chart.pointer.normalize(e.originalEvent);
                } else {
                  event = chart.pointer.normalize(e);
                }
                points = _.map(chart.series, (serie: any) => {
                  return serie.searchPoint(event, true);
                });
                points = _.filter(points, function (point) {
                  return point;
                });

                (e as any).points = points;
                if (points.length && points[0] && points[0].series.area) {
                  points[0].highlight(e);

if (unbind) {
                  unbind();
              }
          });
          handlers.length = 0;
      }

      handlers.push(Highcharts.addEvent(document, 'mousemove', drag));
      handlers.push(Highcharts.addEvent(document, 'touchmove', drag));
      handlers.push(Highcharts.addEvent(document, 'mouseup', unbindAll));
      handlers.push(Highcharts.addEvent(document, 'touchend', unbindAll));
    };

  }

  for (let i = 0; i < Highcharts.charts.length; i = i + 1) {
    chart = Highcharts.charts[i];
    if(chart.options.chart.type === 'scatter3d'){
      Highcharts.addEvent(chart.container, 'mousedown', dragStart(chart));
      Highcharts.addEvent(chart.container, 'touchstart', dragStart(chart));

    }
  }
}, 1000); //1000 ms is totally arbitrary and really a hack to make sure the event binders occur after charts are loaded

data,
  tooltip,
  yAxis,
  xAxis,
  exNorm,
  chartOptions,
  ownerInfo,
  hidden,
}) {
  const windowWidth = useWindowWidth()
  let height = calcHeight(windowWidth) * (chartOptions.height || 1)

  const hChart = Highcharts.charts[0]
  let legendHeight
  if (hChart) {
    legendHeight = Highcharts.charts[0].legend.legendHeight || 0
    height += legendHeight
  }

  const owners = [...new Set(data.map(item => item.owner.slug))]
  const numSpectra = data.length
  const exData = data.filter(i => i.subtype === "EX" || i.subtype === "AB")
  const nonExData = data.filter(i => i.subtype !== "EX" && i.subtype !== "AB")
  return (
    <div height="" style="{{">
      </div>