step two validation schme

src/App.css

@@ -208,3 +208,7 @@
     display : flex;
     flex-direction:row;
 }
+.feedback_error{
+    color: #fd4b4b;
+    font-size:14px;
+}

src/Components/Modal/PasswordModal.jsx

@@ -22,6 +22,7 @@ export function HelpModal (props) {
         lastName: '',
         puesto: '',
         niveles_educativo: 0,
+        puesto_id: 0,
     });
 
     const isStepSkipped = (step) => {
@@ -65,6 +66,8 @@ export function HelpModal (props) {
                 <StepTwo 
                     handleNext={handleNext} 
                     handleBack={handleBack} 
+                    password={password} 
+                    setPassword={setPassword} 
                 />
         },
         {

src/Components/Password/Steps/one.js

@@ -27,13 +27,13 @@ export function StepOne(props) {
         .required("Ingresa un nombre válido"),
         lastName: 
         Yup.string()
-        .required("Ingresa un apellido valido")
+        .required("Ingresa un apellido válido")
         .min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!'),
         puesto: 
         Yup.string()
-        .required("Ingrea un puesto valido"),
+        .required("Ingrea un puesto válido"),
         niveles_educativo: 
-        Yup.number('Ingresa un valor valido')
+        Yup.number('Ingresa un valor válido')
         .required('Ingresa un nivel educativo válido'),
     });
 

src/Components/Password/Steps/two.js

@@ -11,17 +11,20 @@ import {
 export function StepTwo(props) {
 
     const PlazaScheme = Yup.object().shape({
-        puesto: Yup.object().required('Escoge un puesto valido')
+        puesto_id: 
+        Yup.number()
+        .positive('Escoge un puesto válido')
+        .required('Escoge un puesto válido')
     });
 
-    let {  handleNext, handleBack } = props
+    let {  handleNext, handleBack, password, setPassword } = props
 
     const formik = useFormik({
         initialValues: {
-            puesto: {}
+            puesto_id: password.puesto_id
         },
         onSubmit: (fields) => {
-            console.log('SUBMIT > ',fields)
+            setPassword({...password, ...fields})
             handleNext()
         },
         validationSchema: PlazaScheme,
@@ -30,10 +33,11 @@ export function StepTwo(props) {
     const [age, setAge] = React.useState('');
 
     const handleChange = (event) => {
+        console.log("Edad -> ",event.target.value)
         setAge(event.target.value);
     };
 
-    const { handleSubmit,} = formik;
+    const { handleSubmit, touched, errors, getFieldProps } = formik;
 
     return (
         <FormikProvider style={{ padding : 25 }} value={formik}>
@@ -48,13 +52,17 @@ export function StepTwo(props) {
                             value={age}
                             label="Puestos"
                             onChange={handleChange}
+                            {...getFieldProps('puesto_id')}
+                            error={Boolean(touched.puesto_id && errors.puesto_id)}
                         >
-                            <MenuItem value={10}>Ten</MenuItem>
-                            <MenuItem value={20}>Twenty</MenuItem>
-                            <MenuItem value={30}>Thirty</MenuItem>
+                            <MenuItem value={10}>Full Stack</MenuItem>
+                            <MenuItem value={20}>Web Developer</MenuItem>
+                            <MenuItem value={30}>Database Administrator</MenuItem>
                         </Select>
                     </FormControl>
-
+                    <label className="feedback_error">
+                        {touched.puesto_id && errors.puesto_id}
+                    </label>
                     <Box sx={{ mb: 2 }}>
                         <div style={{ paddingTop  : 15}}>
                             <Button