Textfield onChange not works with react and MobX - reactjs

Question

I have a textField which are be controlled by a MobX store, but if I enter something to the textfield only on letter will change. Here my code. There is my mistake?
I made my component as observer and my Store is makeAutoObservable inside the constructor.
class SettingsStore {
constructor() {
makeAutoObservable(this)
makePersistable(this, {
name: 'SampleStore',
properties: ['roadmapDescription'],
storage: window.localStorage
})
}
async onChangeRoadmapTitle(name: string): Promise<void> {
setTimeout(() => {
console.log('input', name)
this.roadmapDescription.title = name
console.log(
'this.roadmapDescription.title',
this.roadmapDescription.title
)
}, 50)
}
}
Here is my React Code
const SettingsGeneral: React.FC<ISettingsGeneral> = observer(({ onSubmit }) => {
return (
<div>
<Form<{ title: string; description: string; dataSource: string }>
onSubmit={(data) => onSubmit(data)}
>
{({ formProps = 'test', submitting }) => (
<form {...formProps}>
<FormSection>
<Field
aria-required={true}
name='title'
label='Name of the Roadmap'
isRequired
>
{({ fieldProps }) => (
<Fragment>
<TextField
testId='roadmap-title-text-field'
autoComplete='off'
{...fieldProps}
className='w-48'
onChange={async (
e: React.ChangeEvent<HTMLInputElement>
) =>
await settingsStore.onChangeRoadmapTitle(e.target.value)
}
value={settingsStore.roadmapDescription.title}
/>
</Fragment>
)}
</Field>
</form>
)}
</Form>
</div>
)
})

Answer 1

The mistake was I use value and not defaultVaule
Correct solution is:
<Fragment>
<TextField
testId='roadmap-title-text-field'
autoComplete='off'
{...fieldProps}
className='w-48'
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
settingsStore.onChangeRoadmapTitle(e.target.value)
}
defaultValue={settingsStore.roadmapDescription.title}
/>
</Fragment>