Validation not triggering correctly for conditionally rendered fields

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

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

  const isValid = useStore(field.store, (state) => state.meta.isValid);
  const isBlurred = useStore(field.store, (state) => state.meta.isBlurred);
  const fieldError = useStore(
    field.store,
    (state) => state.meta.errors?.[0]?.message,
  );
  const submissionAttempts = useStore(
    field.form.store,
    (state) => state.submissionAttempts,
  );

  const displayError =
    (isBlurred || submissionAttempts > 0) && !isValid ? fieldError : 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>
  );
};

export const ExampleForm = () => {
  const form = useAppForm({
    defaultValues,
    validators: {
      onBlur: myZodSchema,
    },

    listeners: {
      onChange: ({ fieldApi }) => {
        if (fieldApi.state.meta.errors.length > 0) {
          fieldApi.setMeta((prev) => ({
            ...prev,
            errorMap: {},
          }));
        }
      },
    },

    onSubmit: async ({ value }) => {
      console.log("🔥 Form submitted:", value);
    },
  });