Mui Select not changing value when defaultValue is set - reactjs

Question

i have a select compontent from the mui react libary.
I also use react-hook-form with controller.
In the controller i will set defaultValue becouse i want to use the reset function von react-hook-form. But when i set default value i cant change the value. When there is no default value everthing works as expected.
Here my Code:
import * as React from "react";
import { useTheme } from "#mui/material/styles";
import OutlinedInput from "#mui/material/OutlinedInput";
import InputLabel from "#mui/material/InputLabel";
import MenuItem from "#mui/material/MenuItem";
import FormControl from "#mui/material/FormControl";
import Select from "#mui/material/Select";
import { useFormContext, Controller } from "react-hook-form";
import Box from '#mui/material/Box';
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
function getStyles(name, personName, theme) {
return {
fontWeight:
personName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
function MySelect({ formname, name, reset, setSelected, data = [] }) {
const {
control,
formState: { errors },
setValue,
} = useFormContext();
let isError = false;
let errorMessage = "";
if (errors && errors.hasOwnProperty(name)) {
isError = true;
errorMessage = errors[name].message;
}
const handleChange = (event) => {
const {
target: { value },
} = event;
setSelected(
// On autofill we get a stringified value.
typeof value === "string" ? value.split(",") : value
);
};
return (
<Box sx={{minWidth: 120}}>
<InputLabel id="demo-multiple-name-label">{name}</InputLabel>
<Controller
name={formname}
style={{ width: 200 }}
control={control}
defaultValue=""
render={({ field: { onChange, value } }) => (
<Select
sx={{ width: 200 }}
labelId="demo-multiple-name-label"
id="demo-multiple-name"
multiple={false}
value={value}
onChange={onChange}
input={<OutlinedInput label={name} />}
MenuProps={MenuProps}
error={isError}
helperText={errorMessage}
>
{data.map((element, i) => {
if (element.bsa_maskenkey)
return (
<MenuItem value={element} key={i}>
{`${element.bsa_maskenkey} ${element.we_menge}`}
</MenuItem>
);
else if (element.blager_maskenkey)
return (
<MenuItem value={element} key={i}>
{`${element.blager_maskenkey} ${element.blagerpo_maskenkey} | Menge: ${element.summe}`}
</MenuItem>
);
else
return (
<MenuItem value={element} key={i}>
{`${element.objekt} | Menge: ${element.menge}`}
</MenuItem>
);
})}
</Select>
)}
/>
</Box>
);
}
export default React.memo(MySelect)
```

Answer 1

Input elements must be either controlled or uncontrolled (specify either the value prop, or the defaultValue prop, but not both). You should decide between using a controlled or uncontrolled input element and remove one of these props. I assume you need controlled inputs since you probably maintain input value in some type of state of your form.
It should be just enough to declare defaultValues in useForm hook, and those will be automatically bind to their related input fields inside form. For example:
useForm({
mode: 'onSubmit',
reValidateMode: 'onChange',
defaultValues: { FieldA: "foo", FieldB: "xai" },
shouldFocusError: true,
shouldUnregister: false,
shouldUseNativeValidation: false
})
When using like this, those default values for FieldA and FieldB will be automatically set as initial values in their related fields inside form, you just need to be sure that you are properly binding those fields with related form state.