How to use the react-joyride.ACTIONS.NEXT function in react-joyride

//console.log(data)

    const centerDiv = (element)=>{
      const elementRect = element.getBoundingClientRect();
      const absoluteElementTop = elementRect.top + window.pageYOffset;
      const middle = absoluteElementTop - (window.innerHeight / 2);
      window.scrollTo(0, middle);
    }

    if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
      
      if (action === ACTIONS.NEXT || action === ACTIONS.PREV)  {

        let t = null

        if (action === ACTIONS.NEXT){
          t = this.state.steps[index + 1]

        } else if (action === ACTIONS.PREV) {
          t = this.state.steps[index - 1]
        }

        if(!t) return
        const a = document.querySelector(t.target)
        centerDiv(a)
      }

      

      // Update state to advance the tour
      //this.setState({ stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) });
    }

handleJoyrideCallback = data => {
    const { action, index, status, type } = data;

    //console.log(data)

    const centerDiv = (element)=>{
      const elementRect = element.getBoundingClientRect();
      const absoluteElementTop = elementRect.top + window.pageYOffset;
      const middle = absoluteElementTop - (window.innerHeight / 2);
      window.scrollTo(0, middle);
    }

    if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
      
      if (action === ACTIONS.NEXT || action === ACTIONS.PREV)  {

        let t = null

        if (action === ACTIONS.NEXT){
          t = this.state.steps[index + 1]

        } else if (action === ACTIONS.PREV) {
          t = this.state.steps[index - 1]
        }

        if(!t) return
        const a = document.querySelector(t.target)
        centerDiv(a)
      }