Reactjs material ui Select item inside dialog with weird style

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>
    );
}