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

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;
    }

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;
    Highcharts.addEvent(axisObj, 'afterSetExtremes', renderRangeSelector);

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 axisObj = axis.object;

const DateRangePickers = () => {
  const Highcharts = useHighcharts();
  const axis = useAxis('xAxis');

  const [from, setFrom] = useState(null);
  const [to, setTo] = useState(null);

  const handleFromDateChange = fromDate => {
    const newMin = startOfDay(fromDate).valueOf();
    const newMax = (newMin >= to) ? newMin + ONE_DAY : to.valueOf();

    axis.setExtremes(newMin, newMax);
  };

  const handleToDateChange = toDate => {
    const newMax = startOfDay(toDate).valueOf();
    const newMin = (newMax <= from) ? newMax - ONE_DAY : from.valueOf();

    axis.setExtremes(newMin, newMax);