Как правильно установить поля через useForm
Я столкнулся с проблемой, которую не могу понять. Когда страница загружается, форма заполняется данными из стора, как и должно быть. В форме есть поле suite. Когда страница загружается, то все поля заполенны, кроме suite, мы должны ввести его с помощью TextField. Но когда я начинаю вводить данные в поле suite, то все данные из формы стираются (т.е не просто поля очищаются, а вообще объект перезаписывается) и остается только поле suite с введенными данными. Я не могу понять, почему я переписываю весь объект, а не только одно поле. Может ли кто-нибудь подсказать мне, как с этим справиться?
export interface AddressData {
countryISO3: string,
street: string,
locality: string,
administrativeArea: string,
suite: string,
postalCode: string,
}
const form = useForm<AddressData>({ defaultValues: { ...store.address } });
const { setValue, setError } = form;
const formValues = form.watch();
const suite = React.useMemo(
() => (
<Box flex={1} style={{ flexGrow: 2 }}>
<FormControl fullWidth>
<Typography className={classes.label}>{t(messageStrings.suiteLabel)}</Typography>
<TextField
fullWidth
error={Boolean(form.errors.suite)}
autoFocus={process.env.PLATFORM !== 'ios'}
inputProps={{ style: { textOverflow: 'ellipsis' }, maxLength: 25 }}
margin="normal"
variant="outlined"
name="suite"
value={formValues.suite}
inputRef={form.register({
validate: { length: (value) => value.length <= 25 || t(messageStrings.suiteIncorrect) }
})}
onChange={(event) => setValue('suite', event.target.value.trim())}
placeholder= {t(messageStrings.suitePlaceholder)}
helperText={form.errors.suite ? form.errors.suite.message : ''}
style={{ height: 56 }}
/>
</FormControl>
</Box>
), [classes.label, form, formValues.suite, setValue, t]);