useController, update value when component mount (e.g useEffect)

[david-hov]

setValue from useForm not updating too, reset not updating too.

export const CustomArrayInput = ({ className, keyLabel, valueLabel, keyName, keySubLabel, valueSubLabel, keyValue, isRequired, keyPlaceholder, valuePlaceholder }: any) => {
const { field }: any = useController({ name: 'headers', rules: { required: 'The field is required' } });

// NEED TO UPDATE ALREADY FETCHED VALUES=> my values are {"a": "b"} need to do [{"headerName": "a", "headerValue" : "b"}]
useEffect(() => {
const newValue: { headerName: string; headerValue: any; }[] = []
Object.keys(field.value).forEach(el => {
newValue.push({ 'headerName': el, 'headerValue': field.value[el] })
});
// NOOOOOOOT UPDATING
field.onChange(newValue)
}, []);

return (
    <ArrayInput className='array-input-select-array' source='headers' label=''>
        <SimpleFormIterator >
            <TextInput
                InputLabelProps={{ shrink: true }}
                placeholder={keyPlaceholder}
                className={className && className}
                onInput={validateOnType}
                variant='outlined'
                validate={isRequired ? required() : undefined}
                fullWidth
                source={keyName}
            />
            <TextInput
                InputLabelProps={{ shrink: true }}
                placeholder={valuePlaceholder}
                className={className && className}
                onInput={validateOnType}
                variant='outlined'
                validate={isRequired ? required() : undefined}
                fullWidth
                source={keyValue}
            />
        </SimpleFormIterator>
    </ArrayInput >
);

}