Как правильно установить поля через 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]);

Ответы (0 шт):