Material UI Search Box with Start Adornment - ReactJS

MaterialUISearch.js

import TextField from '@material-ui/core/TextField';
import SearchIcon from '@material-ui/icons/Search';
import InputAdornment from '@material-ui/core/InputAdornment';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

const Search = () => {
            const SearchStyles = {
                View: {
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    width: "50vw",
                    padding: 20,
                },
                City: {
                    width: "10vw",
                }
                
            }
            return (
                <div style={SearchStyles.View}>
                    <TextField  id="search-bar"
                                placeholder={"Search for Company, Position"}
                                fullWidth
                                InputLabelProps={{ shrink: true }}
                                variant="outlined"
                                onChange={(e) => {this.setState({SearchInput: e.target.value})}}
                                value={this.state.Password}
                                InputProps={{
                                        startAdornment: (
                                            <InputAdornment position="start">
                                                <SearchIcon />
                                            </InputAdornment>
                                        ),
                                    }}
                                />
                    <FormControl variant="outlined" style={SearchStyles.City}>
                        <Select value={this.state.City}
                                displayEmpty
                                onChange={(e) => {this.setState({City: e.target.value})}}
                                >
                                <MenuItem value={""} disabled>City</MenuItem>
                                {
                                    Cities.map((item) => {
                                        return(
                                            <MenuItem value={item.Value}>{item.Label}</MenuItem>
                                        )
                                    })
                                }
                        </Select>
                    </FormControl>
                </div>
            )
        }