props as values

src/Components/Navigation/MovilList.jsx

-import Logo from '../../Images/logo.png';
-import Fade from '@mui/material/Fade';
-
-import {
-    Home, Work,VisibilityOff,PeopleAlt, Equalizer
-} from '@mui/icons-material/'
-
-
-import { NavItem} from '../../Components/Navigation/NavItem'
-import { BottomNav }  from '../../Components/Navigation/BottomNavigation'
-
-
-export function MovilList(props) {
-
-    let { open } =  props;
-
-    return(
-        <Fade 
-            in={open}>
-            <div className="menu-shit w3-sidebar w3-bar-block w3-border-right" id="mySidebar">
-                <div style={{ flat : 'righ' }} className="sidebar-header">
-                    <div className="width_img_mov">
-                        <img src={Logo} alt="pruebas psicometricas"/>
-                    </div>
-                </div>
-                <NavItem icon={<Home/>} title="Inicio" route="home" />
-                <NavItem icon={<Work/>} title="Puestos" route="puestos" />
-                <NavItem icon={<VisibilityOff/>} title="Contraseñas" route="contrasenas" />
-                <NavItem icon={<PeopleAlt/>}  title="Expedientes" route="expedientes" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <NavItem icon={<Equalizer/>} title="Resultados" route="resultados" />
-                <BottomNav/>
-            </div>
-        </Fade>
-    )
-
-}

src/Components/Navigation/listItems.js

         <ListSubheader inset>EXTRAS</ListSubheader>
         {
             ExtraItems.map( ({ icon, route, title}) => 
-                ( <NavItem icon={icon} title={title} route={route} />)
+                ( <NavItem key={route} icon={icon} title={title} route={route} />)
             )
         }
     </Nav>

src/Components/Password/Operation.jsx

     }
 
     let { data: result } = useQuery('contra', getPassword);
+    console.log('DATA:',result)
 
     let initialValues = {
         id: result?.data?.id,
 
 
     const formik = useFormik({
-        initialValues: props.initialValues,
+        initialValues: {
+            state:1,
+            ...props.initialValues,
+        },
         onSubmit: (fields) => {
             console.log('campos> ', fields)
         },
 
     return (
         <FormikProvider value={formik}>
-            <Form style={{ padding: 15, minWidth: 450 }} autoComplete="off" noValidate onSubmit={handleSubmit}>
+            <Form style={{ padding: 15, maxWidth: 450 }} autoComplete="off" noValidate onSubmit={handleSubmit}>
                 <Stack spacing={4}>
 
                     <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
                         />
                     </LocalizationProvider>
 
+                    
                     <Autocomplete
-                        error={Boolean(touched.plaza_id && errors.plaza_id)}
-                        helperText={touched.plaza_id && errors.plaza_id}
-                        autoHighlight={true}
                         id="combo-box-demo"
                         options={puestos}
                         isOptionEqualToValue={(option, value) => option.nombrepuesto === value.nombrepuesto}
                             <TextField
                                 {...params}
                                 label="Puesto"
-                                {...getFieldProps('plaza_id')}
                             />
                         }
                     />