Ошибка при рендеринге диаграммы x-диапазона React highcharts

Я пытаюсь воссоздать демонстрационную диаграмму highcharts x-range (https://www.highcharts.com/demo/x-range) с использованием официальной оболочки React, и я получаю сообщение об ошибке ReferenceError: Highcharts is not defined. Я новичок в реакциях и высоких диаграммах, поэтому не уверен, что мне здесь не хватает

вот код:

import React, { useState } from 'react';

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const AccountContractHistory = (props) => {

    const [chartOptions, setChartOptions] = useState({
        chart: {
            type: 'xrange'
        },
        title: {
            text: 'Highcharts X-range'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: ''
            },
            categories: ['Prototyping', 'Development', 'Testing'],
            reversed: true
        },
        series: [{
            name: 'Project 1',
            // pointPadding: 0,
            // groupPadding: 0,
            borderColor: 'gray',
            pointWidth: 20,
            data: [{
                x: Date.UTC(2014, 10, 21),
                x2: Date.UTC(2014, 11, 2),
                y: 0,
                partialFill: 0.25
            }, {
                x: Date.UTC(2014, 11, 2),
                x2: Date.UTC(2014, 11, 5),
                y: 1
            }, {
                x: Date.UTC(2014, 11, 8),
                x2: Date.UTC(2014, 11, 9),
                y: 2
            }, {
                x: Date.UTC(2014, 11, 9),
                x2: Date.UTC(2014, 11, 19),
                y: 1
            }, {
                x: Date.UTC(2014, 11, 10),
                x2: Date.UTC(2014, 11, 23),
                y: 2
            }],
            dataLabels: {
                enabled: true
            }
        }],
      });

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

export default AccountContractHistory;

Был бы признателен за любую помощь в выяснении того, что я делаю неправильно

Спасибо