How to style react material ui select component height

I'm working on a select component whose height cannot be decreased. Below is the screenshot

I want the Select component height to be as that of the Autocomplete component i.e Project levels

I can make this happen by adding, padding in the HTML div element by inspecting. But, how to add that padding to the component is unknown. This is the HTML what I see for the components I have added.

<div class="MuiInputBase-root MuiOutlinedInput-root" style="width: 300px;"><div class="MuiSelect-root MuiSelect-select MuiSelect-selectMenu MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input" tabindex="0" role="button" aria-haspopup="listbox" aria-labelledby="combo-box-demo" id="combo-box-demo" style="
    padding: 8px; //**** here I have added padding to fix the issue ****
">a134</div>
...
...
...

After adding padding=8px, The problem was solved temporarily.

the problem code was there in code sanbox https://codesandbox.io/s/great-hill-ywql0?file=/App.js

reference code

import React from "react";
import "./styles.css";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import Autocomplete from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        padding: "10px",
        paddingLeft: 0
      }}
    >
      <Select
        variant="outlined"
        style={{ width: 300 }}
        multiple="true"
        value={[]}
        onChange={this.handleProjectName}
        onClose={this.handleProjectName_close}
        id="combo-box-demo"
        renderValue={(selected) => selected.join(", ")}
      >
        <MenuItem value="">
          <em>Select</em>
        </MenuItem>
        {[{ id: 1, name: "a" }].map((item) => (
          <MenuItem key={item.id} value={item.name}>
            <Checkbox checked={[false]} />
            <ListItemText primary={item.name} />
          </MenuItem>
        ))}
      </Select>

      <Autocomplete
        size="small"
        value={[]}
        onChange={this.handleProjectLevel}
        id="combo-box-demo"
        options={[]}
        getOptionLabel={(option) => option.level}
        style={{ width: 300, marginLeft: 10 }}
        renderInput={(params) => (
          <TextField {...params} label="Project levels" variant="outlined" />
        )}
      />

      <Button
        variant="outlined"
        color="primary"
        disabled={![]}
        style={{ marginLeft: 10 }}
        onClick={this.handleProjectReport}
      >
        {" "}
        Submit
      </Button>
    </div>
  );
}