React Hook Form client side validation not rendering

I have a form and in the console the errors object is populated properly but I am trying to prepar for complex forms so this being dynamoc matters

'use client' import { get, useFieldArray, useFormState } from "react-hook-form"; import styles from './index.module.css' export const FormInput = ({ label, name, children, control}) => { const { touchedFields, isSubmitted, isDirty, errors, formState } = useFormState({ control, name:name }); // Use the control's helper to get the specific field state // This handles "alpha2Code" AND "complex.nested.path" const { error, isTouched } = control.getFieldState(name, formState); const name2 = `${name}` const touched = get(touchedFields, name) const errorMessage = error?.message; if(name == "alpha2Code") { console.log("//////////////////") console.log("field name", name) console.log("name true", name === "alpha2Code") console.log("isSubmitted", isSubmitted) console.log("touchedFields", touchedFields) console.log("isTouched", isTouched) console.log("isSubmitted", isSubmitted) console.log("errors ", errors) console.log("error 2", error) console.log("//////////////////") } return ( <div className={styles.forminput}> {/* 1. Label on the left */} <label htmlFor={name} className={styles.label}> {label} </label> {children} {/* 3. Error message on the right */} <div className={styles.message}> {error && (touched || isSubmitted) && ( <div className={styles.managementformgriderror}> {error?.message} </div> )} </div> </div> ); } `use client` import { useFormContext, useFormState } from "react-hook-form"; import { FormInput } from "../elements"; import styles from './index.module.css' export const TextInput = ({ dict }) => { // const formLabel = dict?.label ?? "label"; const formName = dict?.key ?? "name"; // const formPlaceHolder = dict?.placeholder ?? "placeholder"; const { register, control } = useFormContext(); // console.log("text input name", formName) return ( <> <FormInput label={dict.label} name={dict.key} control={control} className={styles.forminput}> <input {...register(dict.key)} className={styles.managementgridinputelement} type="text" placeholder={dict.placeholder} /> </FormInput> </> ) };

if i change the error to const error = errors?.somehardcodedformname it works but i can seem to do antyhing to get the error information, i have also tried get(errors, somehardcodedformname) to no joy

I am just stuck any suggestions would be appriciated