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