Puppeteer tests fail when running in headless mode in react application

I have a puppeteer test that runs fine when puppeteer has headless: false setting but fails when headless: true is set.

The test steps are:

1. logs the user in
2. takes them to a settings page
3. opens a modal
4. types in an email into an input element.
5. checks that the 'next' button on the page is disabled (the email is not in a correct format).

The test usually runs to the point where it should find the next button. At this point it seems that it has lost focus on the page as it hangs waiting for the next button. I think the type portion causes a react re-render and then the focus on the modal is lost.

Here is the test code:

beforeAll(async () => {
  await sleep(5000)
  // browser = await puppeteer.launch(getPuppeteerConfig())
  browser_handler = new BrowserHandler
  await wait_for_browser(browser_handler)

  const context = await browser_handler.browser.createIncognitoBrowserContext()
  page = await context.newPage()

  await page.goto(getGoToPage())
  await page.goto(`${getGoToPage()}/login`)
  console.log('Got to login page')
  await login_customer_email_verified(page)
}, 150000)

afterEach( async() => {
  await page.goto(`${getGoToPage()}/dashboard`)
}, TIMEOUT.SECONDS_7)

//TODO: remove skip after fixing issue of test fails when headless set as 'false'
describe('Test email validation', () => {
  test(
    'Should fail email validation for: johndomain.com',
    async () => {
        await page.waitForNavigation()
        await page.goto(`${getGoToPage()}/settings`)
        console.log('Got to settings page')

        await page.waitForSelector('[data-testid="add_new_email_button"]')
        console.log('Found add_new_email_input button')

        await page.click('[data-testid="add_new_email_button"]')

        await page.waitForSelector('[data-testid="manage_emails_modal"]')
        console.log('Found modal')

        await page.waitForSelector('[data-testid="add_new_email_input"]')
        console.log('Found add_new_email_input')

        await page.type('[data-testid="add_new_email_input"]', 'johndomain.com')
        console.log('Type successful')

        await page.waitForSelector('[data-testid="add_email_next_button"]')
        console.log('Found add_email_next_button')

        await page.click('[data-testid=add_email_next_button]') //blur input
        await sleep(TIMEOUT.SECONDS_1)
        await page.click('[data-testid=add_email_next_button]')

        await page.waitForSelector('[data-testid="add_new_email_input_error_text"]')
        const error_message = await page.$eval(
          '[data-testid="add_new_email_input_error_text"]',
          text => text.innerHTML
        )
        expect(error_message).not.toEqual('')
    },
    TIMEOUT.MINUTES_2
  )
})

Console output when running headless: false

console output when running headless: true

This is the puppeteer config:

export function getPuppeteerConfig(width = 1720, height = 980) {
  let args = [
    '--no-sandbox',
    '--disable-background-timer-throttling',
    '--disable-backgrounding-occluded-windows',
    '--disable-renderer-backgrounding'
  ]
  if (!!width && !!height) {
    args.push(`--window-size=${width},${height}`)
  }
  return {
    args: args,
    //devtools: true,
    headless: true,
    //slowMo: 25,
    defaultViewport: null,
    pipe: true
  }
}

Can anyone offer any suggestions as to why the puppeteer seems to lose focus part way through? Is there anything I can do to fix it?