How to fix Material-UI Select w/ MenuItem where MenuItem being rendered horizontally?

I've been playing with Material-UI with React/Next.js and I'm running across a weird and persistent bug. I can't get the <Select> to render a regular vertical dropdown menu. How do I get the <MenuItem>s to render vertically?

I searched the docs and can't find anything. It's also worth noting my code is pretty much the same as the example:

render (
    <div>
        <FormControl
            fullWidth
            style={{
            paddingBottom: formError
                ? `${paddingBeneathFormControls}px`
                : `${paddingBeneathFormControls + 22}px`,
            }}
        >
            <InputLabel id="demo-simple-select-label">Age</InputLabel>
            <Select
            className="test"
            labelId="demo-simple-select-label"
            label="Age"
            value={10}
            >
            <MenuItem value={10}>Ten</MenuItem>
            <MenuItem value={20}>Twenty</MenuItem>
            <MenuItem value={30}>Thirty</MenuItem>
            </Select>
            {formError && (
            <FormHelperText error>
                Please enter a valid value.
            </FormHelperText>
            )}
        </FormControl>
    </div>
)