I am trying to automate and test the Sign In functionality of AWS amplify authenticator in my Angular app using WebdriverIO. The UI looks like below,

Two issues that I encounter,

1. When I try to get the element using selector, I am getting a button element with text as "Submit" within the span. But the source only has a button of type="Submit" with text "Sign In" inside the span.
2. The element is not clickable. I get a 400 error saying the element is not interactable, as shown in the logs.

The test looks like this,

  describe('open browser and input login', () => {
  it('should sign in', async () => {
    browser.url('http://localhost:4200/');
    await $('>>>#username').addValue('UserXXX');
    await $('>>>#password').addValue('SomePassword');

    const signIn = await $('>>>button[type="submit"]');
    await console.log(signIn.getHTML());
    signIn.click();
  });
})

The console log for the getHTML() is,

Am I missing any configuration in amplify that is restricting me from automating its sign in functionality or is there an alternate way to submit the form other than finding the button and clicking it?