react-hooks-form dependent fields with Material UI TextField - reactjs

Question

With react-hooks-form I am trying to update one field based on another field value. The error I am facing is that my value is not registered in the data object.
This is my code:
const { handleSubmit, control } = useForm({});
const [dateValue, setDateValue] = useState()
const onSubmit = (data) => {console.log(data.week)} \\ undefined
<form
className={classes.root}
autoComplete="on"
onSubmit={handleSubmit(onSubmit)}
>
<Controller
name="date"
control={control}
defaultValue={props.operation === 'edit' ? props.values.date : null}
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
id="date"
type="date"
label="date"
value={value}
className={classes.textField}
onChange={(event) => {
onChange(event.target.value);
setDateValue(event.target.value);
}}
error={!!error}
helperText={error ? error.message : null}
InputLabelProps={{
shrink: true,
}}
/>
)}
rules={{ required: 'Date is required' }}
/>
<Controller
name="week"
control={control}
defaultValue=""
render={({ field: { onChange, value }, fieldState: { error } }) => (
<TextField
id="week"
type="text"
className={classes.textField}
label="week"
disabled={true}
value={dateValue}
onChange={onChange}
error={!!error}
helperText={error ? error.message : null}
/>
)
/>
</form>
Finally, my week value is the result of a function which returns a string containing week - year concatenation.
The value is updated in the TextField, but it is not registered in the data object. Any idea what am I missing?

Answer 1

On the onChange handler of the date field you are updating only the state of dateValue and not the state of the form itself.
You have 2 options:
in the onChange handler of the date field call the setValue method you get from useForm
watch the value of the date field const date = watch('date') and have a useEffect to update the value of the week field:
const {watch, setValue} = useForm()
const date = watch('date')
useEffect(() => {
const calculateWeekValue = () => {...//}
setValue('week', calculateWeekValue(date))
}, [date, setValue])