React Hook form with Dynamic key names creates huge array instead - reactjs

Question

I am working on creating form inputs, where the IDs of the inputs match an item id from the backend data. I need to keep track of the dynamic IDs, so I want the name of the fields to match also.
How can I create a form with an object of dynamic field names? It seems that RHF creates an array instead, so if my itemID is 7841 the array is 7841 in length?
interface DynamicCharges {
...other fields with static names
additionalCharges: {
[id: number]: { // where the `id` comes from the backend so i need the input to follow this
qty: number;
amt: string;
};
}
}
and then implementing the UI:
const chargesWithDynamicIds = (additionalCharges || []).reduce(
(acc, additionalCharge) => {
const keyName = `_${additionalCharge.id}`;
return {
...acc,
additionalCharges: {
...acc.additionalCharges,
[keyName]: {
qty: 0,
amt: '$0.00',
},
},
};
},
otherStaticChargesToInitObj
);
const methods = useForm<ReservationChargesShape>({
defaultValues: chargesWithDynamicIds,
});
<Controller
name={`additionalCharges.${additionalCharge?.id}.qty`}
control={control}
render={({ value, onChange }) => (
<Input
value={value}
onChange={e => {
onChange(e.target.value); // sets the actual QTY input
setValue( // sets the AMT field that is dependent on this QTY change
`additionalCharges.${additionalCharge?.id}.amt`,
formatMoney(
Number(e.target.value) *
centsToDollars(
additionalCharge?.maximum_unit_amount
)
)
);
}}
/>
)}
/>
the original /default form state looks OK
But it turns into an array once the form re-renders
What am I doing wrong with this?
EDIT: I think this is related to the small snippet in their docs:
can not start with a number or use number as key name
What I have done is to prefix the field with _ so the key is no longer numeric, but _7841. Is there any other solution to numeric keys?

Answer 1

The problem come from that you're calling onChange inside your onChange event.
To set the actual QTY input you should use a useState.