How to make select label always appear at top in MUI? - reactjs

Question

I want to create a material ui selector that label always appear at top. I added placeholder to select component. Here is what I want to do.
When not focusing to select component or at the beginning, it looks like this.Label overlaps the place holder.
What I want to create select label always seem at the top and not overlaps the placeholder.
Here is the code at codesandbox
CodeSandbox
import * as React from "react";
import MenuItem from "#mui/material/MenuItem";
import FormControl from "#mui/material/FormControl";
import Select from "#mui/material/Select";
import InputLabel from "#mui/material/InputLabel";
const names = ["Oliver Hansen", "Van Henry", "April Tucker", "Ralph Hubbard"];
export default function MultipleSelectPlaceholder() {
const [personName, setPersonName] = React.useState(null);
const handleChange = (event) => {
setPersonName(event.target.value);
};
return (
<div>
<FormControl sx={{ m: 1, width: 300, mt: 3 }}>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
label="Age"
displayEmpty
value={personName}
onChange={handleChange}
renderValue={(selected) => {
if (selected === null) {
return <em>Please Choose Name</em>;
}
return selected;
}}
>
<MenuItem value={null}>
<em>Clear</em>
</MenuItem>
{names.map((name) => (
<MenuItem key={name} value={name}>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</div>
);
}
<script src="https://unpkg.com/#material-ui/core/umd/material-ui.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"></script>

Answer 1

https://codesandbox.io/s/multipleselectplaceholder-material-demo-forked-t06gm?file=/demo.js
Just add to Select:
notched={true} // Makes space between lines
and to InputLabel:
shrink={true} // Keeps label at top

Answer 2

For this purpose, you can simply pass shrink prop to the InputLabel component