react-hook-form: How to reference errors when i'm programatically are rendering components

I got a code like this

const ExampleForm= ({ data,}) => { 
const { handleSubmit, register, reset, errors, control} = useForm();
return (

    <form onSubmit={handleSubmit(onSubmit)} className={classes.root}>
       <IterateFormData datos={data} regis={register} err={errors} control={control}/>
 </form>

  );
};

That renders inputs depending of the data that i’m recieving from props. and im using nombreVariable as the input name, but when i’m referencing the name of the input to validate errors i’m not getting anything at all, the register is working.

const IterateFormData = ({ datos, regis, err, control }) => {
 let tamanio = data.length > 4? 3 : data.length === 3? 4 : data.length === 2? 6 : 3
  
  for (let i = 0; i < data.length; i++) {
    let info = [];
    let nombreVariable = `${data[i].nombreAtributo}-${data[i].idAtributo}`;

    if (data[i].predefinido === "t") {
 info.push(
            <Grid item xs={tamanio}>
              <TextField
                variant="outlined"
                error={err.nombreVariable? true : false}
                color="secondary"
                type="date"
                name={nombreVariable}
                label={`${data[i].nombreAtributo}*`}
                inputRef={regis({required: true})}
                helperText={err.nombreVariable && "Campo requerido"}
                InputLabelProps={{
                  shrink: true,
                }}
              />
            </Grid>
          );
}

I’m correctly doing the reference of the errors or there is another way to achieve this?