Unable to enter pincode using setValue command in android automation

Hi All, I am automating an android app and there is a email verification page where you have to enter a PIN. I use WebdriverIO with appium and typescript and when I try to enter a code using the setValue or addValue method in that field I get the error “invalid element state: Cannot set the element to ‘H’. Did you interact with the correct element?”
Then I tried to enter the code using the Appium inspector and I got the same error as shown in the image below. Can Someone tell me what I’m doing wrong or is there another way to handle this type of pages

The Webdriverio code I used to enter the values

async enterSecurityCode2(): Promise<CreateProfileScreen> {
        await $(`~pin-input-text-input-0`).setValue("H");
        await $(`~pin-input-text-input-1`).setValue("4");
        await $(`~pin-input-text-input-2`).setValue("5");
        await $(`~pin-input-text-input-3`).setValue("S");
        await $(`~pin-input-text-input-4`).setValue("Y");
    return new CreateProfileScreen();

  }

Could it be that the field only accepts numeric input so entering letters produces an error? I believe I’ve seen that error before when I try to send a string to a numeric only field.

Same issue when entering a number

Maybe try the suggestions in this post:

I tried adding the capabilities mentioned and tried running, have the same issue still. From what I found the action class mentioned in this answer is valid only for Java and doesn’t have an equivalent for webdriverio typescript which I use

After much desperation, I have used the following performactions method to type the values from the keyboard without specifying the field and it’s working. Please let me know whether there are any alternatives or if this approach is bad practice

async enterSecurityCode(securityCode: string): Promise<CreateProfileScreen> {
      await browser.performActions([
        {
          type: 'key',
          id: 'action1',
          parameters: {},
          actions: [
            { type: 'keyDown', value: 'H'},
            { type: 'keyUp', value: 'H' },
            { type: 'keyDown', '4' },
            { type: 'keyUp', '4' },
            { type: 'keyDown', '5' },
            { type: 'keyUp', '5'},
            { type: 'keyDown', 'S' },
            { type: 'keyUp', 'S' },
            { type: 'keyDown', 'Y' },
            { type: 'keyUp', 'Y' },
          ],
        },
      ]);
    return await CreateProfileScreen.init();
  }

This is a good way here. Just use keyboard. In Java it is like:

new Actions(driver).sendKeys(text).perform();