Example of how to react to an external validator client-side

[MattyBalaam]

I am migrating a client-side only form (it uses a 3rd party auth library which only runs client-side) and we want to show errors for various fields and I am a little stuck around how I might accomplish this with conform.

I have made a stripped down example in Sandbox to illustrate a non-working example where the parent validation is shown outside the field.

How can I get Conform fields to react to this external value?

https://codesandbox.io/p/sandbox/conform-me-hsrj3j

[MattyBalaam]

I have a working solution now creating a local lastResult inside my component. I wonder if there is a cleaner way though?

  // store any submitted formData to then parse
  const [submittedFormData, setSubmittedFormData] = useState<FormData | null>();

  // create a local lastResult 
  const lastResult = useMemo(
    () =>
      submittedFormData
        ? parseWithZod(submittedFormData, {
          schema: FieldSchema.transform((data, ctx) => {

            console.log('parse with external value again')

            if (externalError) {
              ctx.addIssue({
                code: z.ZodIssueCode.custom,
                message: externalError,
                path: ["enterCode"],
              });
              return z.NEVER;
            }

            return data;
          }),
        }).reply()
        : null,

    [externalError, submittedFormData]
  );
  
  const [form, fields] = useForm({
    constraint: getZodConstraint(FieldSchema),
    defaultNoValidate: true,
    lastResult,
    shouldValidate: 'onBlur',
    shouldRevalidate: 'onInput',
    onValidate: ({ formData }) => {
      resetErrorState();
      return parseWithZod(formData, { schema: FieldSchema });
    },
    onSubmit: (e, { formData, submission }) => {
      // Prevent the default form submission - auth is handled client-side
      e.preventDefault();

      setSubmittedFormData(formData);

      onSubmit(FieldSchema.parse(submission?.payload));
    },
  });