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

0 && !chartOptions.simpleMode}
        />
        
      
    
  )
})

const MyCredits = provideAxis(function MyCredits({
  getAxis,
  getHighcharts,
  hide,
}) {
  useEffect(() => {
    const axis = getAxis()
    function shiftCredits() {
      const yShift = axis.object.chart.get("xAxis").axisTitleMargin
      axis.object.chart.credits.update({
        position: { y: -25 - yShift, x: -25 - axis.object.axisTitleMargin },
      })
    }
    const hChart = getHighcharts()
    hChart.addEvent(axis.object.chart, "redraw", shiftCredits)
    shiftCredits()
  }, []) // eslint-disable-line

placeholder={`${extremes.dataMax || ""}`}
          value={Math.round(max) || ""}
          inputRef={maxNode}
          onChange={e =>
            mutateExtremes({ variables: { extremes: [min, e.target.value] } })
          }
          onKeyPress={handleKeyPress}
          onBlur={updateRange}
          style={{ ...CLASSES.maxInput, color: maxColor }}
          inputProps={{ style: { textAlign: "center" } }}
        />
      
    
  )
}
export default provideAxis(XRangePickers)