Inconsistent validation timing - first field validates onBlur, subsequent fields validate onChange

const form = useAppForm({
  defaultValues,
  validators: {
    onBlur: muCustomZodSchema, 
  },
  // ...
});

import TextField from "@internal-library/textfield";
import React from "react";
import { useFieldContext, useFormContext } from "../../../../hooks/form";

export const FormTextField = ({
  error,
  ...textFieldProps
}: {
  error?: string;
} & Omit<
  React.ComponentProps<typeof TextField>,
  "name" | "onChange" | "value" | "onBlur"
>) => {
  const field = useFieldContext<string>();
  const form = useFormContext();


  const displayError =
    field.state.meta.isTouched &&
    !field.state.meta.isValid &&
    !field.state.meta.isValidating 
      ? error || field.state.meta.errors?.[0]?.message
      : undefined;

  return (
    <form.Subscribe selector={(state) => state.isSubmitting}>
      {(isSubmitting) => (
        <TextField
          {...textFieldProps}
          name={field.name}
          value={field.state.value || ""}
          onChange={(event) => field.handleChange(event.target.value)}
          onBlur={field.handleBlur}
          disabled={isSubmitting || textFieldProps.disabled}
          error={displayError}
        />
      )}
    </form.Subscribe>
  );
};