Highcharts not properly load with the ReactJs

I am trying to use "react": "18.3.1" with highcharts

├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

Basic high charts are working but sankey module can't load properly. I am getting below error. Here i attached the ts code. can someone have why this happen. what the best way to load this highcharts/modules/sankey module

Server Error

TypeError: Cannot read properties of undefined (reading 'SeriesRegistry')

import React from "react";
    import Highcharts, { Options } from "highcharts";
    import HighchartsReact from "highcharts-react-official";
    import SankeyModule from "highcharts/modules/sankey";
    
    // Initialize the Sankey module
    SankeyModule(Highcharts);
    
    const SankeyChart: React.FC = () => {
      const options: Options = {
        title: { text: "Sankey Chart Example" },
        series: [
          {
            type: "sankey",
            keys: ["from", "to", "weight"],
            data: [
              ["Node A", "Node B", 5],
              ["Node B", "Node C", 3],
            ],
          },
        ],
      };
    
      return <HighchartsReact highcharts={Highcharts} options={options} />;
    };
    
    export default SankeyChart;