Reusable react-hook-form useFieldArray component in TypeScript

[arezookheirabedi]

i couldent get fiels error on my customArray export const CustomFormComponent = () => {
const { t } = useTranslation();

const {
control,
register,
formState: { errors },
} = useFormContext();

const {
fields: labels,
append: append_labels,
remove: remove_labels,
} = useFieldArray({
control,
name: "labels",
});

return (


{t("labels")}

help


{labels.map((field, index) => {
return (
<Grid
key={field.id}
container
spacing={2}
alignItems={"center"}
className="label-input"
>

<TextField
error={!!errors?.labels?.[index]?.key}
aria-invalid={errors?.labels?.[index]?.key ? true : false}
helperText={
errors?.labels?.[index]?.key?.message && (

{errors?.labels?.[index]?.key?.message}

)
}
fullWidth
{...register(labels.${index}.key)}
type="text"
label={t("page__project__key")}
/>


<TextField
error={!!errors?.labels?.[index]?.value}
aria-invalid={errors?.labels?.[index]?.value ? true : false}
helperText={
errors?.labels?.[index]?.value?.message && (

{errors?.labels?.[index]?.value?.message}

)
}
fullWidth
{...register(labels.${index}.value)}
type="text"
label={t("page__project__value")}
/>


<IconButton color="inherit" onClick={() => remove_labels(index)}>
delete



);
})}
<Button
variant="contained"
className="label-button"
disabled={!!errors?.labels}
onClick={() => {
append_labels({
key: "",
value: "",
});
}}
>
{t("+ Add Labels")}



);
};

this is the same issue in stack overflow

https://stackoverflow.com/questions/72785829/reusable-react-hook-form-usefieldarray-component-in-typescript

whould you pls tel how can handel the customfiled Array wich be reusable and use in formProvider