How to use HeadlessUI React and React Hook Form to focus Menu on error?

[grantspilsbury]

I want the HeadlessUI React menu to focus if it has the first error just like the other elements registered using React Hook Form.

This is my menu and additional input fields. If the inputs both have errors the first one gets focus

const {
register,
control,
formState: { errors }
} = useForm<Model.FormInputs>({ shouldFocusError: true })

return (
  <form onSubmit={formSubmitHandler}>
    <Controller
      name="enquiryTopic"
      control={control}
      rules={{ required: 'Topic is required' }}
      render={({ field }) => (
        <Menu as="div">
        {({ open }) => (
          <>
            <MenuButton>{label}</MenuButton>
            <MenuItems>
              {items.map((item) => (
                <MenuItem item={item} handleClick={handleClick} key={item} />
              ))}
            </MenuItems>
          </>
        )}
      </Menu>
      )}
    />
    <input
      id={'name'}
      value={name}
      {...register('name', validation)}
    />
   <input
      id={'email'}   
      value={email}
      {...register('email', validation)}
    />
    <input type="submit" value="Send" />
  </form>
)

How can I plumb the HeadlessUI react Menu to use the same error focus functionality?