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

// 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 modifiedProps = useModifiedProps(props);

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

  const { children } = props;
  if (!children || !rendered) return null;

  return {children};
};

const NavigatorAxis = ({ children, axisId, ...restProps }) => {
  const axis = useAxis(axisId);
  const renderedRef = useRef(false);

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

    updateNavigatorAxis(getNonEventHandlerProps(restProps), axis);
  }, [axis]);

  const modifiedProps = useModifiedProps(restProps);

  useEffect(() => {
    if (!renderedRef.current) {
      // don't update on first render
      renderedRef.current = true;
      return;
    }

    if (!axis) return;

    if (modifiedProps !== false) {
      updateNavigatorAxis(modifiedProps, axis);
    }
  });

  if (!children) return null;

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 modifiedProps = useModifiedProps({ enabled, ...restProps });

  useEffect(() => {
    if (!rendered) return;
    if (modifiedProps !== false) {
      updateMapNavigation(modifiedProps, chart);
    }
  });

  if (!children || !rendered) return null;

  return <>{children};
};
const getMapNavigationConfig = (props, Highcharts) => {

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 renderRangeSelector = createRenderRangeSelector(chart, axis);
    const axisObj = axis.object;
    Highcharts.addEvent(axisObj, 'afterSetExtremes', renderRangeSelector);

    setRendered(true);

    return (() => {
      const axisObj = axis.object;
      Highcharts.removeEvent(axisObj, 'afterSetExtremes', renderRangeSelector);

      attempt(updateRangeSelector, { enabled: false }, chart);
    })
  },[axis])

  const modifiedProps = useModifiedProps(props);

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

    if (modifiedProps !== false) {
      updateRangeSelector(modifiedProps, chart);
    }
  })

  if (!children || !rendered) return null;

  return (
    <>{children}
  );
}

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;

  return <>{children};
};

const renderRangeSelector = createRenderRangeSelector(chart, axis);
    const axisObj = axis.object;
    Highcharts.addEvent(axisObj, 'afterSetExtremes', renderRangeSelector);

    setRendered(true);

    return () => {
      const axisObj = axis.object;
      Highcharts.removeEvent(axisObj, 'afterSetExtremes', renderRangeSelector);

      attempt(updateRangeSelector, { enabled: false }, chart);
    };
  }, [axis]);

  const modifiedProps = useModifiedProps(props);

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

    if (modifiedProps !== false) {
      updateRangeSelector(modifiedProps, chart);
    }
  });

  if (!children || !rendered) return null;

  return <>{children};
};