How can I use MUI TextField with "select" and "multiple" props? - reactjs

Question

I am trying to create multiple select input but had problem with the TextField because it is not accepting multiple props My TextField is shown in the code block.
<TextField
label={crmFieldTitleMap(value, t)}
size="small"
variant="outlined"
select
multiple
value={....}
onChange={....}
input={<OutlinedInput />}
renderValue={....}
MenuProps={MenuProps}
>
{value.options.length &&
value.options.map((item) => (
<MenuItem key={crmFieldTitleMap(item, t)} value={item.value}>
<Checkbox
checked={
crmPostData[value.value]
? crmPostData[value.value].includes(item.value)
: false
}
/>
<ListItemText primary={crmFieldTitleMap(item, t)} />
</MenuItem>
))}
</TextField>;
With TextField I can't select multiple items but label seems pretty nice
Then I found a solution to choose multiple select which I used and as shown in the code block.
<FormControl className="w-full ">
<InputLabel id="multiple_select_thingy">{titleMultiple(value, t)}</InputLabel>
<Select
labelId="multiple_select_thingy"
label={titleMultiple(value, t)}
size="small"
variant="outlined"
multiple
disabled={....}
value={....}
onChange={....}
input={<OutlinedInput />}
renderValue={....}
MenuProps={MenuProps}
>
{value.options.length &&
value.options.map((item) => (
<MenuItem key={crmFieldTitleMap(item, t)} value={item.value}>
<Checkbox
checked={
crmPostData[value.value]
? crmPostData[value.value].includes(item.value)
: false
}
/>
<ListItemText primary={crmFieldTitleMap(item, t)} />
</MenuItem>
))}
</Select>
</FormControl>;
With Select I can select multiple items perfectly but the label seems weird.
Also when there are no items selected input gets weird too