WebdriverIO element selector not finding validation error text with xPath - returns false for isExisting() & isDisplayed()

I am testing a web UI using WebdriverIO, specifically an email send form. This test must ensure that the error helper text (like "email required") are displayed when submitting the form without having filled it out.

I have a Page Object Model that I import into my test, in this POM I wrote the selector getters for these error texts, pecifically 3 of them. errorOne & errorTwo both have IDs that let me select them easily ( wrote only errorOne bc errorTwo is the same):

POM.js:

get errorOneHelperText(){
return (async () => {
return browser.$('#\\#\\/properties\\/error-One-Text');
})
}

async isErrorOneVisible(){

try{
const errorText = await this.errorOneHelperText;
return await errorText.isDisplayed()
}catch (error){
console.log("Error One is not displayed")
}
}

^Here error-One-Text is the selector ID, which lets me successfully test it.

TestFile.js:

import POM

it('should pass the test', async function (){

await EmailForm.ClickButton();

expect(await POM.isErrorOneVisible()).to.be.true //This one passes
expect(await POM.isErrorTwoVisible()).to.be.true //This one passes
expect(await POM.isErrorThreeVisible()).to.be.true //This does not pass

})

my problem comes with errorThree. It has no ID so I must test by finding it on the screen.

I have tried many ways:

In the POM:

get errorThreeHelperText(){
return (async () => {
return browser.$('/html/body/div[4]') //imagine this is the full xPath
})
}

async isErrorThreeVisible(){

try{
const errorText = await this.errorTreeHelperText;
return await errorText.isDisplayed()
}catch (error){
console.log("Error Three is not displayed")
}
}

Or even in the Testfile.js:

const link = await $('=WebdriverIO')
await expect(link).toHaveText('WebdriverIO') //as stated in the webdriverIO documentation

I do not know what else to do.