Error in rendering a React highcharts x-range chart - reactjs

Question

I am trying to re-create the highcharts x-range demo chart (https://www.highcharts.com/demo/x-range) using the official React wrapper and I'm getting a "ReferenceError: Highcharts is not defined" error. I'm new to both react and highcharts so not sure what I'm missing here
here's the code:
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;
Would appreciate any help in figuring out what I'm doing wrong
Thanks

Answer 1

You can find a demo of this chart in React here:
https://stackblitz.com/edit/react-highcharts-xrange-demo
You have to remember to properly load highcharts modules:
https://github.com/highcharts/highcharts-react#how-to-add-a-module

Answer 2

Seeing same error but (using Typescript) for my fix i needed to pass in Highcharts to the xrange like so:
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import xrange from 'highcharts/modules/xrange';
xrange(Highcharts);
and then the markup:
<HighchartsReact
highcharts={Highcharts}
options={options}
{...this.props}
/>