shouldFocusOnError focusses on second error's input field

[grantspilsbury]

I am using a form with shouldFocusOnError: true. The problem is that the incorrect input is being focussed on when there are errors:

• When there is only one error, the form focuses correctly on the input with the error.
• When there are multiple errors, the form incorrectly focuses on the second input with an error instead of the first one.

eg with input fields: email, first name, last name

Single Error:
• If there is only one error in the form, the input field with that error gets focused.
• Example: If the email field has an error, the email input field will be focused.
Multiple Errors:
• If there are multiple errors, it focusses the second input field with an error.
• Example 1: If both email and first name have errors, the focus will be on the first name field (the second error).
• Example 2: If the first name and last name fields have errors, the focus will be on the last name field (the second error).
• Example 3: If email, first name, and last name fields all have errors, the focus will be on the first name field (the second error).

This probably an issue with my other code and how I've implemented react-hook-form but what could be causing this focus issue?

This screenshot shows all 3 fields empty but the first name is focussed instead of the expected email.