HighCharts zoom with mouse wheel in react - reactjs

Question

Intro
Hi I'm new to react and new to Highcharts but have worked with js before. I have a zoom function, I'd like to convert this to react code. I'm having hard time figuring out how to use Highcharts.Chart.prototype.callbacks.push in the context of react.
What I'm trying to do
I'm trying to create a zoom function that is smooth with the mouse wheel on a stock chart. The popular platform trading view has a very smooth zoom and I'm trying to do something similar to that.
The code:
I have the code working decently in a js fiddle https://jsfiddle.net/drewscatterday/84shran6/ but I'm having hard time converting this to react.
I have tried doing this in my react code but had no luck:
const handleScroll= (e) =>{
e.preventDefault();
var chart = Highcharts.chart;
var xAxis = chart.xAxis[0],
extremes = xAxis.getExtremes(),
newMin = extremes.min,
output = [];
if (e.deltaY < 0) {
xAxis.setExtremes(extremes.min - (extremes.min * 0.001), extremes.max, true);
}
else {
xAxis.setExtremes(extremes.min + (extremes.min * 0.001), extremes.max, true);
}
}
<div className="Chartdisplay__chart" id="chart" onScroll={handleScroll}>
<StockChart options={stockOptions} highcharts={Highcharts} />
</div>
I have also just tried adding the function straight up like this but also had no luck:
let ar = [];
(function(H) {
Highcharts.Chart.prototype.callbacks.push(function(chart) {
H.addEvent(chart.container, 'mousewheel', function(e) {
var xAxis = chart.xAxis[0],
extremes = xAxis.getExtremes();
if (e.deltaY < 0) {
xAxis.setExtremes(extremes.min - (extremes.min * 0.001), extremes.max, true);
}
else {
xAxis.setExtremes(extremes.min + (extremes.min * 0.001), extremes.max, true);
}
});
});
}(Highcharts));
Thank you for anyone who takes the time to read this and help me :)

Answer 1

To extend Higstock in React.js put the code that you want to wrap before the configuration object (options).
import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react-official'
(function(H) {
Highcharts.Chart.prototype.callbacks.push(function(chart) {
H.addEvent(chart.container, 'wheel', function(e) {
var xAxis = chart.xAxis[0],
extremes = xAxis.getExtremes(),
newMin = extremes.min;
console.log(extremes);
console.log(newMin);
if (e.deltaY < 0) {
xAxis.setExtremes(extremes.min - (extremes.min * 0.001), extremes.max, true);
}
else {
xAxis.setExtremes(extremes.min + (extremes.min * 0.001), extremes.max, true);
}
});
});
}(Highcharts));
const options = {
title: {
text: 'My chart'
},
plotOptions: {
series: {
enableMouseTracking: true
}
}
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
Live demo: https://stackblitz.com/edit/react-hmvz2z?file=index.js