Material ui Component "Select" não define o item escolhido. O item selecionado não permanece selecionado e é renderizado muito pequeno

// Select is down bellow almost at the end. Above the button.

import React, { useState } from 'react';
import { Container } from '@mui/material';
import { Typography } from '@mui/material';
import { Box } from '@mui/material';
import { TextField } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { Button } from '@mui/material';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import Grid from '@mui/material/Grid';
// import Controls from '../components/Controls';
import Select from '../components/Select';

const initialValues = {
    id: 0,
    fullName: '',
    address: '',
    local: '',
    city: '',
    CEP: '',
    phone: '',
    contact: '',
    email: '',
    numBank: '',
    branch: '',
    account: '',
    balance: '',
    date: '',
    stateId: '',

}


const useStyles = makeStyles((theme) => {
    return{
        root: {
           
            display: "flex",
            flexwrap: "wrap",
            
            
        },
        textField: {
            margimLeft: theme.spacing(1),
            margimRight: theme.spacing(1),
            width: "25ch",
        },
        
        field: {
            spacing: 2,
            display: "block",
        }
    }
});

export default function Bancos(){
    const classes = useStyles()
    const [fullName, setFullName] = useState('');
    const [address, setAddress] = useState('');
    const [fullNameError, setFullNameError] = useState(false);
    const [addressError, setAddressError] = useState(false);
    const [numBank, setNumBank] = useState('');
    const [branch, setBranch] = useState('');
    const [account, setAccount] = useState('');
    const [numBankError, setNumBankError] = useState(false);
    const [branchError, setBranchError] = useState(false);
    const [accountError, setAccountError] = useState(false);
    const [ values, setValues ] = useState(initialValues);

    const handleInputChange = e => {
        const { name, value } = e.target
        setValues({
            ...values,
            [name]: value
        })
    
    }
  

const handleSubmit = (e) => {
    e.preventDefault()
    setFullNameError(false)
    setAddressError(false)

    if(fullName == ''){
        setFullNameError(true)
    }

    if( address == ''){
        setAddressError(true)
    }
    if ( numBank == ''){
        setNumBankError(true)
    }
    if (branch == ''){
        setBranchError(true)
    }
    if (account == ''){
        setAccountError(true)
    }
}


    return(
        <Container>
            <form noValidate autoComplete="off" onSubmit={handleSubmit}>
        <Typography  variant="h6" color="textSecondary" align="center" gutterBottom
         className="titleBank">
            Cadastro de Bancos
        </Typography>

            <Grid container spacing={2}>
                <Box mt={3} mb={1}> {/* colocar margim top e bottom com box   */}
                <Grid item xs={6} md={6}>
                <TextField label="Nome do Banco" variant="outlined" color="secondary"
                sx={{width: "430px", ml: 2}} required className={classes.field} name="fullName"
                value={values.fullName}  error={ fullNameError }
                onChange={ handleInputChange }/>
               
                </Grid></Box>
            
                 <Box mt={1}>
                 <Grid item xs={6} md={10} style={{ display: "flex" }}>
                 <TextField label="Endereço" variant="outlined" color="secondary"
                 sx={{width: "650px", mr: 1, ml: 2}} required className={classes.field} name="address"
                 value={values.address}
                onChange={handleInputChange} error={addressError}/>
                <TextField label="Bairro"  className={classes.textField} name="local"
                 sx={{width: "350px" }}  value={ values.local }
                 onChange={ handleInputChange }  />
                </Grid></Box>
                <Grid item xs={6} md={10} style={{ display: "flex", margimLeft: 0}}>

                <TextField label="Cidade"  className={classes.field} name="city"
                sx={{width: "320px", mr: 1 }}  value={values.city}
                onChange={ handleInputChange } />

                 <TextField label="CEP"  className={classes.field} name="CEP"
                 sx={{width: "180px", mr: 1}} value={ values.CEP } 
                 onChange={ handleInputChange }/> 
               
                <TextField label="Contato" className={classes.field} name="contact"
                sx={{width: "350px", mr: 1 }} value={ values.contact} 
                onChange={ handleInputChange } />
                </Grid>

                <Grid item xs={6} md={10} style={{ display: "flex", margimLeft: 0}}>
                <TextField label="Telefone"  className={classes.field} name="phone"
                 sx={{width: "235px", mr: 1 }} value={ values.phone }
                 onChange={ handleInputChange } />
                 <TextField label="Celular"  className={classes.field} name="phone"
                 sx={{width: "235px", mr: 1 }} value={ values.phone }
                 onChange={ handleInputChange } />
                <TextField label="E-mail"  className={classes.field} name="email"
                 sx={{width: "350px", mr: 1 }} value={values.email} 
                 onChange={ handleInputChange } />
              
                 </Grid><br/>
                
                 <Grid item xs={6} md={10} style={{ display: "flex", margimLeft: 0}}>
                 <Box width="150px">
                 <Select  sx={{width: "150px", mr: 1 }} 
                    name="state"
                    label="Estado"
                    value={values.stateId}
                    onChange={handleInputChange}
                    options={Select.choices}
                    fullWidth
                 /> </Box>   
                 <TextField label="Nº do Banco" className={classes.field} required
                 sx={{width: "100px", mr: 1 }} name="numBank" value={values.numBank}
                 onChange={ handleInputChange } error={ numBankError } />   
                 <TextField label="Nº Agência" className={classes.field} name="branch"
                 sx={{width: "150px", mr: 1 }} value={ values.branch } required
                 onChange={ handleInputChange } error={ branchError } />
                <TextField label="Nº Conta Corrente" className={classes.field} name="account"
                 sx={{width: "250px", mr: 1 }}  value={ values.account } required 
                 onChange={ handleInputChange } error={ accountError } />
                 <TextField label="Saldo R$"  className={classes.field} name="balance"
                 sx={{width: "180px", mr: 1 }} value={ values.balance } 
                 disabled />
                 </Grid><br/>
                 <Grid item xs={6} md={8} style={{ display: "flex" }}> 
                <Box mt={4}> {/* colocar margim top e bottom com box   */}
                <Button type="submit" variant="contained" color="primary"
                 endIcon={<KeyboardArrowRightIcon />} 
                >
                 Salvar
                </Button>
                </Box>
                </Grid>
            </Grid>            
        
            </form>
        </Container>
        
    
    )
}

import React from 'react'
import {FormControl, InputLabel, Select as MuiSelect,  MenuItem }  from '@mui/material';

// Selection of a State in Brazil

export default function Select(props) {

  const choices = () => ([
    { id: '1', title: 'Acre'}, 
    { id: '2', title: 'Alagoas'},
    { id: '3', title: 'Amazonas' },
    { id: '4', title: 'Amapá'   }, 
    { id: '5', title: 'Bahia'  }, 
    { id: '6', title: 'Distrito Federal'}, 
    { id: '7', title: 'Espírito Santo' }, 
    { id: '8', title: 'Mato Grosso do Sul'}, 
    { id: '9', title: 'Mato Grosso'}, 
    { id: '10', title: 'Rio de Janeiro'}, 
    { id: '11', title:  'São Paulo' }, 
    { id: '12', title: 'Minas Gerais'}, 
    { id: '13', title: 'Paraná'  }, 

  ]);
  

const { name, label, value, onChange } = props; 


  return (
    <FormControl  variant="outlined">
      <InputLabel>{label}</InputLabel>
      <MuiSelect label={label} name={name} value={value} onChange={onChange}>
        <MenuItem value="">none</MenuItem>
          {
            choices().map(
              item => (<MenuItem key={item.id} value={item.id}>{item.title}</MenuItem>)
            )
          }

        </MuiSelect>

      </FormControl>
    

  )
}