HELP: Strange behaviour with useFetcher in Remix

[jashiels99]

I am getting some strange behaviour when using Conform with the fetcher.Form component.

I have extended the useForm hook into my own hook (useFetcherForm):

export function useFetcherForm<TSchema extends z.ZodTypeAny>(
    schema: TSchema,
    defaultValue?: DefaultValue<TypeOf<TSchema>>
) {
    const fetcher = useFetcher<SubmissionResult<string[]> | null>();
    const lastResult = useActionData<SubmissionResult<string[]> | null>();

    const [form, fields] = useConformForm({
        lastResult: fetcher.state === 'idle' ? lastResult : null,
        onValidate({ formData }) {
            return parseWithZod(formData, { schema });
        },
        shouldValidate: 'onBlur',
        constraint: getZodConstraint(schema),
        defaultValue,
    });

    return {
        fetcher,
        form,
        fields,
    };
}

I have also extended the fetcher.Form component into my own component:

const { fetcher, form, fields } = useFetcherForm(schema, defaultValue);
...
return (
  <FormProvider context={form.context}>
      <fetcher.Form {...getFormProps(form)} action={action} method="POST">
          <input type="hidden" hidden name="requestType" value="fetcher" />
          {renderFields(fields)}
      </fetcher.Form>
  </FormProvider>
)

Firstly, according to the Conform documentation, I should use useActionData to set the lastResult property. This doesn't appear to work. The server-side validation isn't being picked up by the hook, even though it is picked up in the Network tab. So I tried this:
lastResult: fetcher.state === 'idle' ? fetcher.data : null

This made more sense to me, and the server-side validation errors were now appearing. If I was to submit this form by clicking the submit button, this would all work just fine. However, when the form is submitted by pressing 'Return', it appears I get some sort of race condition (I think??). I have attached a screenshot of the unwanted response.