Binding initial value to material ui select - reactjs

Question

I am using material ui in my react application.
And I am using select component.
I want to bind some initial values to the select control.
I had tried with the useState hook. It's not working.
Below is the code i am using.
const userContributors=[{
firstName: "user101",
id: "1",
role: "Users"
},{
firstName: "user102",
id: "2",
role: "Users"
},{
firstName: "user103",
id: "3",
role: "Users"
}]
const [ApplicationAdminUsers, SetApplicationAdminUsers] = useState([
{
firstName: "user101",
id: "1",
role: "Users"
}
]);
<FormControl
variant="outlined"
margin="normal"
InputLabelProps={{
shrink: true
}}
validators={["required"]}
errorMessages={["Select Application Admin"]}
className={[
classes.formControl,
"fullWidthControl",
"multiselect-checkbox"
].join(" ")}
>
<InputLabel
ref={inputLabel}
htmlFor="select-multiple-checkbox"
className="multi-label-top"
>
Select Users...
</InputLabel>
<Select
multiple
value={ApplicationAdminUsers}
onChange={handleChangeUserContributores}
className="multi-input-padding"
validators={["required"]}
errorMessages={["Select Application Admin"]}
input={
<OutlinedInput
labelWidth={labelWidth}
id="select-multiple-checkbox"
/>
}
MenuProps={MenuProps}
>
{userContributors.map((item, index) => (
<MenuItem key={"aa" + item.id} value={item}>
{item.firstName}
</MenuItem>
))}
</Select>
</FormControl>
And here I'm using this as multi select control.
Any solutions to solve this.
Thanks

Answer 1

When you're using object as material-ui Select value, you need to provide 'renderValue' prop:
renderValue={selected => selected.map(item => item.firstName).join(', ')}
You can refer to this CodeSandbox example

Answer 2

You can't use an object as the value for the input, it needs to be a string.
Also you haven't handled the onChange to update the array to add/remove items.
As a simple example.
const userContributors=["joe", "bob", "tim"]
...
const [ApplicationAdminUsers, SetApplicationAdminUsers] = useState(["joe"]);
...
<Select
multiple
value={ApplicationAdminUsers}
onChange={(event)=> SetApplicationAdminUsers(event.target.value)}
className="multi-input-padding"
validators={["required"]}
errorMessages={["Select Application Admin"]}
input={
<OutlinedInput
labelWidth={labelWidth}
id="select-multiple-checkbox"
/>
}
MenuProps={MenuProps}
>