Reactjs material ui Select item inside dialog with weird style - css

Question

I am trying to create a "Dialog" box which contain a "Select" inside it.
As you can see from image "Select" component is showing item so weird!
I tried to style the items but I couldn't find the way to show item regular (Vertical items with white background color and black foreground color).
I have to mention that I copied the exact code in material ui website for "Dialog" and
"Select"
When I use "Select" inside "Dialog" this weird style happen.
This is my code:
import React, {useState} from 'react';
import {makeStyles, withStyles} from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import Dialog from '#material-ui/core/Dialog';
import MuiDialogTitle from '#material-ui/core/DialogTitle';
import MuiDialogContent from '#material-ui/core/DialogContent';
import MuiDialogActions from '#material-ui/core/DialogActions';
import IconButton from '#material-ui/core/IconButton';
import CloseIcon from '#material-ui/icons/Close';
import Typography from '#material-ui/core/Typography';
import Card from "#material-ui/core/Card";
import CardActionArea from "#material-ui/core/CardActionArea";
import CardMedia from "#material-ui/core/CardMedia";
import CardContent from "#material-ui/core/CardContent";
import CardActions from "#material-ui/core/CardActions";
import {Col, Row} from "react-bootstrap";
import {FormControl, InputLabel, MenuItem, Select, TextField} from "#material-ui/core";
const styles = (theme) => ({
root: {
margin: 0,
padding: theme.spacing(2),
},
closeButton: {
position: 'absolute',
right: theme.spacing(1),
top: theme.spacing(1),
color: theme.palette.grey[500],
},
});
const DialogTitle = withStyles(styles)((props) => {
const { children, classes, onClose, ...other } = props;
return (
<MuiDialogTitle disableTypography className={classes.root} {...other}>
<Typography variant="h6">{children}</Typography>
{onClose ? (
<IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
<CloseIcon />
</IconButton>
) : null}
</MuiDialogTitle>
);
});
const DialogContent = withStyles((theme) => ({
root: {
padding: theme.spacing(2),
},
}))(MuiDialogContent);
const DialogActions = withStyles((theme) => ({
root: {
margin: 0,
padding: theme.spacing(1),
},
}))(MuiDialogActions);
export default function SdWanDialog(props) {
const {
status,
handleClose,
company
} = props;
const useStyles2 = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 185,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
const classes2 = useStyles2();
const [subnet, setSubnet] = useState('');
const handleChange = (event) => {
setSubnet(event.target.value);
};
return (
<div>
{/*<Button variant="outlined" color="primary" onClick={handleClickOpen}>*/}
{/* Open dialog*/}
{/*</Button>*/}
<Dialog onClose={handleClose} aria-labelledby="customized-dialog-title" open={status}>
<DialogTitle id="customized-dialog-title" onClose={handleClose}>
TITLE
</DialogTitle>
<DialogContent >
<Row>
<Col>
<FormControl variant="outlined">
<InputLabel id="select-label">Subnet</InputLabel>
<Select
labelId="select-label"
id="select-id"
value={subnet}
onChange={handleChange}
label="Subnet"
>
<MenuItem value=""><em>None</em></MenuItem>
<MenuItem value={'value1'}>value1</MenuItem>
<MenuItem value={'value2'}>value2</MenuItem>
<MenuItem value={'value3'}>value3</MenuItem>
</Select>
<br/>
<TextField
id="branchName"
label="Branch name"
variant="outlined"
color="primary"
/>
</FormControl>
</Col>
</Row>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} variant="contained" color="primary">
Save changes
</Button>
</DialogActions>
</Dialog>
</div>
);
}