The error I am getting is
'Argument of type 'expenses.${number}.description' is not assignable to parameter of type '"description" | "name" | "numberOfExpenses" | "expenses" | "expenses.0" | "expenses.0.description" | "expenses.0.cost" | "expenses.0.timestamp"'
According to these docs https://react-hook-form.com/api/usefieldarray, this would be the correct syntax however I am wondering if my FormValues or my defaultValues are incorrect.
This is my form type declaration
type FormValues = {
description: string,
name: string,
numberOfExpenses: number,
expenses: [{description: string, cost: string, timestamp: string}]
}
This is my form declaration along with the types expected
const {
handleSubmit,
register,
setValue,
reset,
control,
watch,
formState: { errors, isSubmitting, isValid },
} = useForm<FormValues>({
defaultValues: {
description: 'Default Description',
name: 'Generic Name',
numberOfExpenses: 0,
expenses: [{description: '', cost: '', timestamp: ''}]
},
resolver: zodResolver(projectSchema),
});
This is the area of my code causing the error
{fields.map((item, i: number) => (
<HStack>
<Input
placeholder='description'
{...register(`expenses.${i}.description` as const)}>
</Input>
</HStack>
))}