Give <Select> options a border - reactjs

Question

Is it possible to give the container of the <Select> options a border? The <Select> tag implements a <Popover> with a <Menu> component on which the <MenuItem>s options are rendered, but the documentation does not detail how this container can be styled.
There is an option to apply props to the menu via MenuProps, but it is not clear in the examples/documentation how a border could be applied to it.
https://codesandbox.io/s/material-demo-2cdqs?fontsize=14
import ...;
const useStyles = makeStyles((theme: Theme) =>
createStyles({
containerWithBorder: {
paper: {
border: "1px solid red"
}
}
})
);
function SimpleSelect() {
const classes = useStyles();
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-simple">Age</InputLabel>
<Select
MenuProps={{ // Can this be used to give the options a border?
classes: classes.containerWithBorder
}}
value={values.age}
onChange={handleChange}
inputProps={{
name: "age",
id: "age-simple"
}}
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
);
}
export default SimpleSelect;

Answer 1

Yes, what you would do is write your style in the in the override useStyles section
const useStyles = makeStyles((theme: Theme) =>
createStyles({
select: {
border: "1px solid black",
},
}),
);
like this and then you would pass it to the Select component:
<Select className={classes.select} />
like this