我创建了一个组件DateTimePicker（可能是DatePicker），我在YouTube视频中推荐了所有安装，也在这个网站上。经过一天半的努力，我需要你的帮助。我没法去上班。所以，下面是我的代码，如果你能在一个单独的组件被用于其他形式，我将不胜感激。先谢谢你了。

// Bancos component (means Banks)
// if I don't comment the lines commented bellow, the form does not render and breaks the app.

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 Select from '../components/Select';
// import Stack from '@mui/material/Stack';
// import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
// import { DatePicker } from '@mui/x-date-pickers/DateTimePicker';
// import MuiDatePicker from '../components/DatePicker';

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

const initialSelectValues = { id: '', title: ''} 

const useStyles = makeStyles((theme) => {
    return{
        root: {
           
            display: "flex",
            flexwrap: "wrap",
            
            
        },
        textField: {
            margimLeft: theme.spacing(1),
            margimRight: theme.spacing(1),
            width: "2ch",
        },
        
        field: {
            spacing: 1,
            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 [ value, setValue ] = useState(initialSelectValues)
    

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

    // const [dateValue, setDateValue] = useState<Date | null>(null);

    // const handleChange = (newValue) => {
    //   setDateValue(newValue);
    // };

    const handleSelectChange = (e) => {
        const { name, value } = e.target
        setValue({id: e.target.value})
        console.log(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> // commented
                <LocalizationProvider dateAdapter={AdapterDateFns}>
                <Stack spacing={3}>
      
                <DatePicker
                    label="Date&Time picker"
                    value={dateValue}
                    onChange={handleChange}
                    renderInput={(params) => <TextField {...params} />}
                />
                </Stack>
                </LocalizationProvider>

                </Box> // commented  */}
                 <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}}>
                 
                 <Select   
                    name="state"
                    label="Estado"
                    value={value.id}
                    onChange={handleSelectChange}
                    options={Select.choices}
                    fullWidth
                 /> 
      
                 <TextField label="Nº do Banco" className={classes.field} required
                 sx={{width: "125px", mr: 1, ml: 1 }} name="numBank" value={values.numBank}
                 onChange={ handleInputChange } error={ numBankError } />   
                 <TextField label="Nº Agência" className={classes.field} name="branch"
                 sx={{width: "155px", mr: 1 }} value={ values.branch } required
                 onChange={ handleInputChange } error={ branchError } />
                <TextField label="Nº Conta Corrente" className={classes.field} name="account"
                 sx={{width: "200px", mr: 1 }}  value={ values.account } required 
                 onChange={ handleInputChange } error={ accountError } />
                 <TextField label="Saldo R$"  className={classes.field} name="balance"
                 sx={{width: "200px", 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>
        
    
    )
}

// DatePicker component
import React, {useState} from 'react';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

export default function MuiDatePicker() {
  const [dateValue, setDateValue] = useState<Date | null>(null);

  const handleChange = (newValue) => {
    setDateValue(newValue);
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <Stack spacing={3}>
      
        <DateTimePicker
          label="Date&Time picker"
          value={dateValue}
          onChange={handleChange}
          renderInput={(params) => <TextField {...params} />}
        />
      </Stack>
    </LocalizationProvider>
  );
}