Nested fields never rerender on state change

[viveleroi]

I'm prototyping a basic form component.

The problem is that my Input components never rerender, so they never show error states. When I submit the form, the validation errors are logged via handleSubmit so I know they're working.

export const Input = ({ label, name }: LabelProps): JSX.Element => {
  const { getFieldState, register } = useFormContext()
  const fieldState = getFieldState(name)
  console.log('name', fieldState)

  return (
    <div>
      <Label label={label} name={name} />
      <input
        {...register(name)}
        className={clsx(styles.input, { [styles.error]: fieldState.isTouched && fieldState.error })}
      />
      {fieldState.isTouched && fieldState.error ? <p>{fieldState.error.message}</p> : ''}
    </div>
  )
}

const schema = zod.object({
  name: zod.string().min(1, { message: 'Required' }),
  age: zod.number().min(10)
})

export const FormDemo = (): JSX.Element => {
  const methods = useForm({
    resolver: zodResolver(schema),
    mode: 'all'
  })

  const onSubmit = (data): void => console.log('success', data);
  const onError = (errors): void => console.log('error', errors);

  return (
    <FormProvider {...methods}>
      <form onSubmit={methods.handleSubmit(onSubmit, onError)}>
        <Input label='Name' name='name' />
        <Input label='Age' name='age' />
        <SubmitButton>Submit</SubmitButton>
      </form>
    </FormProvider>
  )
}

[viveleroi]

Looks like my problem was my Input wasn't properly "subscribed" to formState:

const { getFieldState, register, formState } = useFormContext()
const fieldState = getFieldState(name, formState)