Disabling stepper titles using pointer-events none does not

Current behavior

I've added using CSS the pointer-events: none to the step-titles, however, it still does not stop the stepper from activating nextStep() or prevStep().

According to another post (https://mdbootstrap.com/support/jquery/stepper-disable-all-steps/) the steps should be disabled.

Expected behavior

I need a JS function that disables all steps. We don't want a user to be able to proceed forward OR backward using the step titles. We only want the continue button in the step actions to proceed forward. We have validation that keeps the continue button disabled until the criteria is met, then it is enabled.

Why was this function not included from the original creators code?

// Enable or disable navigation by clicking on step-titles
   stepTitleNavigation: true,

Under options https://kinark.github.io/Materialize-stepper/

I have provided a snippet here but it is not working with steppers. Also, I cannot get the snippet to work even though I'm using Pro version?

Update

Can I do something along the lines of this? How can I prevent the nextStep() and prevStep() from firing?

$(".disabled-step-navigation").on("click" ,'.step:not(.active)', function (e) {
    e.preventStepChange();
})