I am faced with a problem that I do not understand. When the page loads, the form is filled with data from the store, as it should. In the form we have a suite field. When the page loads, it is empty and we have to enter it using TextField. But when I start entering data into a suite field, then all the data from the form is erased(i.e. not just the fields are cleared, but the object is overwritten) and only the suite field with the data I entered is left. I can’t figure out why I’m rewriting the whole object and not just one field. Can anyone tell me how to deal with it?

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]);