IntroJS always returning same object values on change

Question

I have a tour setup using Into.JS and I have this below JS code:

intro.onchange(function(targetElement) {
    // if current step is 2
    console.log(intro);
    if (intro._currentStep == 3) {
      // get the domain
      var domain = window.location.href;
      // remove "admin.php?page=x"
      domain = domain.replace("admin.php?page=x", "");
      // redirect to domain/wp-admin/edit.php?post_type=x
      window.location.href = domain + "/edit.php?post_type=x";
    } else {

    }

The problem I have is that the onchange event fires however the current step is always 0 and the log for intro always shows the same object values. Current step 0, direction forward (even if going back). I'm not sure why intro is not updating. My tour spans over multiple pages and this issue only happens on the page it starts on. To do this we have a single JS file with over 50 steps and we are trying to redirect people from the first page to another page when they reach step 4.

This is the object being returned (I have removed our steps and intro text)

{
    "_currentStep": 0,
    "_direction": "forward",
    "_targetElement": {
        "jQuery36405634054896225421": {
            "events": {
                "click": [
                    {
                        "type": "click",
                        "origType": "click",
                        "guid": 1199,
                        "selector": "a.thickbox, area.thickbox, input.thickbox",
                        "needsContext": false,
                        "namespace": ""
                    },
                    {
                        "type": "click",
                        "origType": "click",
                        "guid": 1211,
                        "selector": "tbody > tr > .check-column :checkbox",
                        "needsContext": false,
                        "namespace": ""
                    },
                    {
                        "type": "click",
                        "origType": "click",
                        "guid": 1212,
                        "selector": "thead .check-column :checkbox, tfoot .check-column :checkbox",
                        "needsContext": false,
                        "namespace": "wp-toggle-checkboxes"
                    },
                    {
                        "type": "click",
                        "origType": "click",
                        "guid": 1228,
                        "selector": ".js-update-details-toggle",
                        "needsContext": false,
                        "namespace": ""
                    },
                    {
                        "type": "click",
                        "origType": "click",
                        "guid": 1237,
                        "selector": ".divi-membership-duplicate",
                        "needsContext": false,
                        "namespace": ""
                    },
                    {
                        "type": "click",
                        "origType": "click",
                        "guid": 1316,
                        "selector": ".insert-media",
                        "needsContext": false,
                        "namespace": "add-media-button"
                    },
                    {
                        "type": "click",
                        "origType": "click",
                        "guid": 1317,
                        "selector": ".et-safe-mode-indicator",
                        "needsContext": false,
                        "namespace": ""
                    },
                    {
                        "type": "click",
                        "origType": "click",
                        "guid": 1318,
                        "selector": ".et_safe_mode_toggle .et_pb_yes_no_button",
                        "needsContext": false,
                        "namespace": ""
                    },
                    {
                        "type": "click",
                        "origType": "click",
                        "guid": 1319,
                        "selector": ".et-core-safe-mode-block-modal .et-core-modal-action",
                        "needsContext": false,
                        "namespace": ""
                    },
                    {
                        "type": "click",
                        "origType": "click",
                        "guid": 1320,
                        "selector": ">.et-core-safe-mode-block-modal .et-core-modal-close",
                        "needsContext": true,
                        "namespace": ""
                    }
                ],
                "thickbox:iframe:loaded": [
                    {
                        "type": "thickbox:iframe:loaded",
                        "origType": "thickbox:iframe:loaded",
                        "guid": 1200,
                        "namespace": ""
                    }
                ]
            }
        }
    },
    "_hintItems": [],
    "_options": {
        "hints": [],
        "isActive": true,
        "nextLabel": "Next",
        "prevLabel": "Back",
        "skipLabel": "×",
        "doneLabel": "Done",
        "hidePrev": false,
        "hideNext": false,
        "nextToDone": true,
        "tooltipPosition": "bottom",
        "tooltipClass": "",
        "group": "",
        "highlightClass": "",
        "exitOnEsc": true,
        "exitOnOverlayClick": true,
        "showStepNumbers": true,
        "stepNumbersOfLabel": "/",
        "keyboardNavigation": true,
        "showButtons": true,
        "showBullets": false,
        "showProgress": true,
        "scrollToElement": true,
        "scrollTo": "element",
        "scrollPadding": 30,
        "overlayOpacity": 0.5,
        "autoPosition": true,
        "positionPrecedence": [
            "bottom",
            "top",
            "right",
            "left"
        ],
        "disableInteraction": false,
        "dontShowAgain": false,
        "dontShowAgainLabel": "Don't show this again",
        "dontShowAgainCookie": "introjs-dontShowAgain",
        "dontShowAgainCookieDays": 365,
        "helperElementPadding": 10,
        "hintPosition": "top-middle",
        "hintButtonLabel": "Got it",
        "hintShowButton": true,
        "hintAutoRefreshInterval": 10,
        "hintAnimation": true,
        "buttonClass": "introjs-button",
        "progressBarAdditionalClass": false
    },
    "_lastShowElementTimer": 6,
    "introjs-instance": 1,
    "introjs-stamp": 3
}

This is how I am initializing intro and a few steps:

var intro = introJs();

intro.setOptions({
  showProgress: true,
  showBullets: false,
  showStepNumbers: true,
  stepNumbersOfLabel: '/',
    steps: [
    {
      title: 'Welcome',
      intro: 'Thanks for checking out our product',
    },
    {
      element: document.querySelector('#general-settings'),
      intro: 'Here is step two',
    }, 
    {
      element: document.querySelector('#de-epanel-save'),
      intro: 'Here is step three',
    }, 
    {
      element: document.querySelector('#de-epanel-save'),
      intro: 'Here is step four',
    }, 
    {
      element: document.querySelector('#de-epanel-save'),
      intro: 'Here is step five',
    }
  ]
  }).start();