How to use the react-jsx-highcharts.useChart function in react-jsx-highcharts

const RangeSelector = ({ enabled = true, children, ...restProps }) => {
  const props = { enabled, ...restProps };
  const [rendered, setRendered] = useState(false);
  const Highcharts = useHighcharts();
  const chart = useChart();
  const axis = useAxis('xAxis');

  useEffect(() => {
    if (!axis) return;

    // Workaround inferred from http://jsfiddle.net/x40me94t/2/
    const chartObj = chart.object;
    chartObj.options.rangeSelector.enabled = true;
    // Initialise RangeSelector (see https://github.com/highcharts/highcharts/blob/dd730ab/js/parts/RangeSelector.js#L1464-L1468)
    Highcharts.fireEvent(chartObj, 'afterGetContainer');

    const opts = getRangeSelectorConfig(props, Highcharts);
    updateRangeSelector(opts, chart);

    const renderRangeSelector = createRenderRangeSelector(chart, axis);
    const axisObj = axis.object;

const MapNavigationButton = props => {
  const Highcharts = useHighcharts();
  const chart = useChart();

  useEffect(() => {
    const { type, ...rest } = props;
    const opts = getMapNavigationButtonConfig(rest, Highcharts);
    updateMapNavigationButton(type, opts, chart);

    return () => {
      // TODO removeButton was missing in original class?
      //const { type } = props;
      //attempt(this.removeButton, type, {});
    };
  }, []);

  return null;
};
const getMapNavigationButtonConfig = (props, Highcharts) => {

const RangeSelectorButton = ({
  count = 1,
  offsetMin = 0,
  offsetMax = 0,
  ...restProps
}) => {
  const props = { count, offsetMin, offsetMax, ...restProps };

  const chart = useChart();

  useEffect(() => {
    const button = getButtonIndex(props, chart);
    if (button > -1) return; // Button already present

    const {
      count,
      type,
      offsetMin,
      offsetMax,
      dataGrouping,
      children: text,
      ...rest
    } = props;
    const opts = {
      count,

const Navigator = ({ enabled = true, ...restProps }) => {
  const props = { enabled, ...restProps };
  const [rendered, setRendered] = useState(false);
  const chart = useChart();
  const Highcharts = useHighcharts();

  useEffect(() => {
    const { children, ...rest } = props;
    // Workaround from http://jsfiddle.net/x40me94t/2/
    const chartObj = chart.object;
    chartObj.options.navigator.enabled = true;
    // Initialise Navigator https://github.com/highcharts/highcharts/blob/dd730ab/js/parts/Navigator.js#L1837-L1844
    Highcharts.fireEvent(chartObj, 'beforeRender');

    updateNavigator(rest, chart);

    setRendered(true);

    return () => {
      attempt(updateNavigator, { enabled: false }, chart);

const RangeSelectorInner = ({ enabled = true, axisId, children, ...restProps }) => {
  const props = { enabled, ...restProps };
  const [rendered, setRendered] = useState(false);
  const Highcharts = useHighcharts();
  const chart = useChart();
  const axis = useAxis(axisId);


  useEffect(() => {
    if (!axis) return;

    // Workaround inferred from http://jsfiddle.net/x40me94t/2/
    const chartObj = chart.object;
    chartObj.options.rangeSelector.enabled = true;
    Highcharts.fireEvent(chartObj, 'init'); // Pre Highcharts 6.1
    Highcharts.fireEvent(chartObj, 'afterGetContainer'); // Highcharts 6.1+

    const opts = getRangeSelectorConfig(props, Highcharts);
    updateRangeSelector(opts, chart);

    const renderRangeSelector = createRenderRangeSelector(chart, axis);

const MapNavigation = ({ children, enabled = true, ...restProps }) => {
  const [rendered, setRendered] = useState(false);
  const chart = useChart();
  const Highcharts = useHighcharts();

  useEffect(() => {
    // Workaround inferred from http://jsfiddle.net/x40me94t/2/
    const chartObj = chart.object;
    chartObj.options.mapNavigation.enabled = true;
    // Initialise MapNavigation https://github.com/highcharts/highcharts/blob/dd730ab/js/parts-map/MapNavigation.js#L288-L294
    Highcharts.fireEvent(chartObj, 'beforeRender');

    const opts = getMapNavigationConfig({ enabled, ...restProps }, Highcharts);
    updateMapNavigation(opts, chart);

    setRendered(true);

    return () => {
      attempt(updateMapNavigation, { enabled: false }, chart);

const RangeSelectorInput = ({ enabled = true, ...restProps }) => {
  const chart = useChart();

  useEffect(() => {
    return () => {
      attempt(updateRangeSelectorInputs, { enabled: false }, chart);
    };
  }, []);

  const modifiedProps = useModifiedProps({ enabled, ...restProps });

  useEffect(() => {
    if (modifiedProps !== false) {
      updateRangeSelectorInputs(modifiedProps, chart);
    }
  });

  return null;

const Scrollbar = ({ children, enabled = true, ...restProps }) => {
  const chart = useChart();

  useEffect(() => {
    return () => {
      attempt(updateScrollbar, { enabled: false }, chart);
    };
  }, []);

  const modifiedProps = useModifiedProps({ enabled, ...restProps });

  useEffect(() => {
    if (modifiedProps !== false) {
      updateScrollbar(modifiedProps, chart);
    }
  });

  if (!children) return null;