Webdriver IO browser object function doesn't work in certain instances

Question

I am trying to use the Webdriver IO browser.pause() function within my code. It works in certain parts of my code and not other parts and I have no idea why that is. FYI I am using Webdriver IO with Cucumber so the code structure isn't too flattering.

Here is some example code:

Example 1:

The browser.pause() function executes here and works fine as intended.

step-definition.js

Given(/^blah blah blah 1$/, async function () {
    // ...
});

When(/^blah blah blah 2$/, async function () {
    await browser.pause(5000);
});

Then(/^blah blah blah 3$/, async function () {
   // ...
});

Example 2:

The browser.pause() function executes from Clazz.js and works fine as intended.

Clazz.js

class Clazz {
    static async init() {
        await browser.pause(5000);
        return new Clazz();
    }
}

step-definition.js

Given(/^blah blah blah 1$/, async function () {
    // ...
});

When(/^blah blah blah 2$/, async function () {
    const clazz = await Clazz.init();
});

Then(/^blah blah blah 3$/, async function () {
   // ...
});

Example 3:

The browser.pause() function DOES NOT work as intended. The debug console shows that the browser object is accessible, but test execution is not paused.

Clazz.js

class Clazz {
    static async init() {
        return new Clazz();
    }

    async sampleFunc(arg1, arg2) {
        sampleFunc(arg1, arg2);
    }
}

const sampleFunc = async ({arg1, arg2} = {}) => {
    await browser.pause(5000);
}

step-definition.js

Given(/^blah blah blah 1$/, async function () {
    // ...
});

When(/^blah blah blah 2$/, async function () {
    const clazz = await Clazz.init();
    clazz.sampleFunc(arg1, arg2);
});

Then(/^blah blah blah 3$/, async function () {
   // ...
});

I'm not really sure why this is happening. Any help would be appreciated. Thanks.