Currently, I am working on a project where I am utilizing React and MUI. Within my forms, I have implemented the useForm hook from react-hook-form. Here is a snippet of how I am using it:
React.useEffect(() => {
const defaultValues = new Provider();
defaultValues.code = '123';
defaultValues.name = 'some name';
reset({...defaultValues});
}, []);
The TextFields in my form are structured like this:
<TextField
id="codeInput"
required
label="Code"
variant="outlined"
error={!!errors['code']}
helperText={errors['code'] ? errors['code'].message : ''}
{...register('code')}/>
<TextField
id="nameInput"
required
label="Name"
variant="outlined"
style={{width: '75vw'}}
error={!!errors['name']}
helperText={errors['name'] ? errors['name'].message : ''}
{...register('name')}/>
I have also attempted to set the values like so:
setValue('code', '123', {shouldDirty: true, shouldTouch: true});
setValue('name', 'some name', {shouldDirty: true, shouldTouch: true});
Yet, when displayed, the TextFields appear as shown in this image: https://i.stack.imgur.com/Zj5hh.png
Any suggestions on what might be causing this issue?