Highstocks not showing stock tools - reactjs

Question

I am trying to plot a time-series but I am not getting the stock tools as in the left-side of this chart. Example from the highstocks website: enter link description here
The code with options:
import React from 'react';
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react-official'
class Graph extends React.Component {
getOptions = (dataSets) => {
return {
yAxis: [{
labels: {
align: 'left'
},
height: '80%',
resize: {
enabled: true
}
}, {
labels: {
align: 'left'
},
top: '80%',
height: '20%',
offset: 0
}],
title: {
text: 'Summary'
},
series: [{
name: 'INFY',
data: dataSets.data
}]
};
};
render() {
const {dataSets} = this.props;
const options = this.getOptions(dataSets);
return (
<div>
<HighchartsReact
highcharts={Highcharts}
constructorType={'stockChart'}
options={options}
/>
</div>
)
}
}
export default Graph;
Here is what is rendered:
What is going wrong?
EDIT:
After applying the suggestions by #ppotaczek. I get this:
Updated code:
import React from 'react';
import Highcharts from "highcharts/highstock";
import indicatorsAll from "highcharts/indicators/indicators-all";
import annotationsAdvanced from "highcharts/modules/annotations-advanced";
import priceIndicator from "highcharts/modules/price-indicator";
import fullScreen from "highcharts/modules/full-screen";
import stockTools from "highcharts/modules/stock-tools";
import HighchartsReact from "highcharts-react-official";
indicatorsAll(Highcharts);
annotationsAdvanced(Highcharts);
priceIndicator(Highcharts);
fullScreen(Highcharts);
stockTools(Highcharts);
class Graph extends React.Component {
getOptions = (dataSets) => {
return {
yAxis: [{
labels: {
align: 'left'
},
height: '80%',
resize: {
enabled: true
}
}, {
labels: {
align: 'left'
},
top: '80%',
height: '20%',
offset: 0
}],
title: {
text: 'Summary'
},
series: [{
name: 'INFY',
data: dataSets.data
}]
};
};
render() {
const {dataSets} = this.props;
const options = this.getOptions(dataSets);
return (
<div>
<HighchartsReact
highcharts={Highcharts}
constructorType={'stockChart'}
options={options}
/>
</div>
)
}
}
export default Graph;

Answer 1

You need load CSS styles and import and initialize all of the required modules:
import indicatorsAll from "highcharts/indicators/indicators-all";
import annotationsAdvanced from "highcharts/modules/annotations-advanced";
import priceIndicator from "highcharts/modules/price-indicator";
import fullScreen from "highcharts/modules/full-screen";
import stockTools from "highcharts/modules/stock-tools";
indicatorsAll(Highcharts);
annotationsAdvanced(Highcharts);
priceIndicator(Highcharts);
fullScreen(Highcharts);
stockTools(Highcharts);
Live demo: https://codesandbox.io/s/highcharts-react-demo-3s8v7
Docs: https://www.highcharts.com/docs/stock/stock-tools