TypeError: Cannot read properties of null (reading 'useRef') when using HighchartsReact in React

Question

I'm trying to integrate Highcharts into my React application using the highcharts-react-official package. I want to build a bell curve, However, when I render the chart component, I receive the following error:

Cannot read properties of null (reading 'useRef') TypeError: Cannot read properties of null (reading 'useRef')

I'm not directly using the useRef hook in my code, so I'm unsure why this error is occurring. Here is my code:

import React from "react";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import bellcurve from "highcharts/modules/histogram-bellcurve";

// Initialize bell curve module
bellcurve(Highcharts);

function BellCurve() {
  const options = {
    title: {
      text: "Bell Curve Chart",
    },
    xAxis: {
      title: {
        text: "Value",
      },
    },
    yAxis: {
      title: {
        text: "Frequency",
      },
    },
    series: [
      {
        name: "Bell Curve",
        type: "bellcurve",
        baseSeries: 1,
        zIndex: -1,
        marker: {
          enabled: true,
        },
      },
      {
        name: "Data",
        type: "scatter",
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      },
    ],
  };

  return (
    <div>
      <HighchartsReact highcharts={Highcharts} options={options} />
      <h1>hello</h1>
    </div>
  );
}

export default BellCurve;

And here is how I call the BellCurve component:

import React, { useEffect, useState } from "react";
import BellCurve from "./components/BellCurve";

function App() {
  return (
    <div className="App">
      <BellCurve />
    </div>
  );
}

export default App;

I've checked my code and I don't directly use the useRef hook. What could be causing this?