WebdriverIO unable to reference an element in Chrome (works in Firefox and Edge)

I'm trying to run the WebdriverIO code below:

it('Login Success Page title',async()=>

    {
        await browser.url("https://rahulshettyacademy.com/loginpagePractise/")
        await $("input[name='username']").setValue("rahulshettyacademy")
        const password = $("//input[@type='password']")
        await password.setValue("learning")
        await $("#signInBtn").click()
        await $(".btn-primary").waitForExist()
        await expect(browser).toHaveUrlContaining("shop")
        await expect(browser).toHaveTitle("ProtoCommerce")    
    })

The code works fine in Firefox and MS Edge, but not in Chrome.

I tried the below:

1. Different CSS selectors
2. Using browser.debug()

These are my dependency versions:

• WebdriverIO v7
• Chrome v101
• node v16.14.2

Below is the image showing the error for not finding the element and timing out:

my package.json dependencies are as follows:

{
    "name": "webdriverio-tests",
    "version": "0.1.0",
    "private": true,
    "devDependencies": {
        "@wdio/cli": "^7.19.7",
        "@wdio/local-runner": "^7.19.7",
        "@wdio/mocha-framework": "^7.19.7",
        "@wdio/selenium-standalone-service": "^7.7.4",
        "@wdio/spec-reporter": "^7.19.7",
        "chromedriver": "^101.0.0",
        "wdio-chromedriver-service": "^7.3.2"
    },
    "scripts": {
        "wdio": "wdio run wdio.conf.js"
    },
    "dependencies": {
        "chai": "^4.3.6"
    }
}