maqueta stepper form

src/Components/Modal/PasswordModal.jsx

 
 import { Puesto } from '../Password/Steps/puesto'
 import { Password } from '../Password/Steps/password'
-import { StepFour } from '../Password/Steps/four'
+import { Candidato } from '../Password/Steps/candidato'
 
 export function HelpModal(props) {
 
 
     const steps = [
         {
-            label: 'Selecciona un Puesto',
+            label: 'Puesto',
             operation:
                 <Puesto
                     handleNext={handleNext}
                 />
         },
         {
-            label: 'Seleccionar pruebas',
+            label: 'Candidato',
             operation:
-                <Puesto
+                <Candidato
                     handleNext={handleNext}
                     handleBack={handleBack}
                     password={password}
         },
         {
             label: 'Confirmar',
-            operation:
-                <StepFour
-                    handleNext={handleNext}
-                    handleBack={handleBack}
-                    password={password}
-                    setPassword={setPassword}
-                />
+            operation: <h1>guardar</h1>
         },
     ];
 

src/Components/Password/Steps/candidato.jsx

 import React from 'react'
 import * as Yup from 'yup';
-import { useState } from 'react';
 import { useFormik, Form, FormikProvider } from 'formik';
 
-import {  
-    Box, Button,
-    Stack, TextField, 
-    InputLabel,MenuItem,FormControl,Select
+import {
+    Box, Button, FormControlLabel, Checkbox,
+    Stack, TextField, FormGroup,
 } from '@mui/material';
 
-import { niveles_educativos } from '../Rows'
-
 
 export function Candidato(props) {
 
-    const [educativo, setEducativo] = useState('');
-
-    const changeNivelEducativo = (event) => {
-        setEducativo(event.target.value);
-    };
-
     const CandidatoSchema = Yup.object().shape({
-        firstName: 
-        Yup.string()
-        .min(2, 'Demasiado corto!')
-        .max(50, 'Demasiado largo!')
-        .required("Ingresa un nombre válido"),
-        lastName: 
-        Yup.string()
-        .required("Ingresa un apellido válido")
-        .min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!'),
-        puesto: 
-        Yup.string()
-        .required("Ingrea un puesto válido"),
-        niveles_educativo: 
-        Yup.number('Ingresa un valor válido')
-        .required('Ingresa un nivel educativo válido'),
+        firstName:
+            Yup.string()
+                .min(2, 'Demasiado corto!')
+                .max(50, 'Demasiado largo!')
+                .required("Ingresa un nombre válido"),
+        lastName:
+            Yup.string()
+                .required("Ingresa un apellido válido")
+                .min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!'),
+        puesto:
+            Yup.string()
+                .required("Ingrea un puesto válido"),
+        niveles_educativo:
+            Yup.number('Ingresa un valor válido')
+                .required('Ingresa un nivel educativo válido'),
     });
 
-    let {  handleNext, handleBack, password, setPassword } = props
+    let { handleNext, handleBack, password, setPassword } = props
 
     const formik = useFormik({
         initialValues: {
-            firstName: password.firstName ,
+            firstName: password.firstName,
             lastName: password.lastName,
             puesto: password.puesto,
             niveles_educativo: password.niveles_educativo,
         },
         onSubmit: (fields) => {
-            setPassword({...password, ...fields})
+            setPassword({ ...password, ...fields })
             handleNext()
         },
         validationSchema: CandidatoSchema,
     });
 
-    const {errors, touched, handleSubmit, getFieldProps } = formik;
+    const { errors, touched, handleSubmit, getFieldProps } = formik;
 
     return (
-        <FormikProvider style={{ padding : 25 }} value={formik}>
+        <FormikProvider style={{ padding: 25 }} value={formik}>
             <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
                 <Stack spacing={3}>
                     <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
                             {...getFieldProps('firstName')}
                             error={Boolean(touched.firstName && errors.firstName)}
                             helperText={touched.firstName && errors.firstName}
-                            />
+                        />
 
                         <TextField
                             label="Apellidos"
                             {...getFieldProps('lastName')}
                             error={Boolean(touched.lastName && errors.lastName)}
                             helperText={touched.lastName && errors.lastName}
-                            />
+                        />
                     </Stack>
 
-                    <TextField
-                        fullWidth
-                        type="text"
-                        label="Experiencia laboral o puesto"
-                        {...getFieldProps('puesto')}
-                        error={Boolean(touched.puesto && errors.puesto)}
-                        helperText={touched.puesto && errors.puesto}
+                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
+                        <TextField
+                            fullWidth
+                            type="text"
+                            label="Correo Electronico"
+                            {...getFieldProps('puesto')}
+                            error={Boolean(touched.puesto && errors.puesto)}
+                            helperText={touched.puesto && errors.puesto}
                         />
+                        <FormGroup>
+
+                            <FormControlLabel
+                                control={
+                                    <Checkbox
+                                        defaultChecked
+                                        color="default"
+                                    />
+                                }
+                                label="Enviar Correo"
+                            />
+                        </FormGroup>
+                    </Stack>
+
+
 
-                    <FormControl fullWidth>
-                        <InputLabel id="demo-simple-select-label">Nivel Educativo</InputLabel>
-                        <Select
-                            labelId="demo-simple-select-label"
-                            id="demo-simple-select"
-                            value={educativo}
-                            label="Nivel Educativo"
-                            onChange={changeNivelEducativo}
-                            {...getFieldProps('niveles_educativo')}
-                            error={Boolean(touched.niveles_educativo && errors.niveles_educativo)} >
-                            {
-                                niveles_educativos.map( ( nivel, index ) => {
-                                return (
-                                    <MenuItem key={nivel} value={index}>{nivel}</MenuItem>
-                                )
-                            })
-                        }
-                        </Select>
-                    </FormControl>
+                    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={4}>
+                        <TextField
+                            fullWidth
+                            type="text"
+                            label="Puesto"
+                            {...getFieldProps('puesto')}
+                            error={Boolean(touched.puesto && errors.puesto)}
+                            helperText={touched.puesto && errors.puesto}
+                        />
+                        <TextField
+                            fullWidth
+                            type="text"
+                            label="Empresa"
+                            {...getFieldProps('puesto')}
+                            error={Boolean(touched.puesto && errors.puesto)}
+                            helperText={touched.puesto && errors.puesto}
+                        />
+                    </Stack>
 
 
                     <Box sx={{ mb: 2 }}>
-                        <div style={{ paddingTop  : 15}}>
+                        <div style={{ paddingTop: 15 }}>
                             <Button
                                 type="submit"
-                                className="registerBtn" 
+                                className="registerBtn"
                                 variant="contained"
                                 sx={{ mt: 1, mr: 1 }}
                             >
                                 {'Siguiente'}
                             </Button>
                             <Button
-                                disabled={true}
+                                disabled={false}
                                 onClick={handleBack}
                                 sx={{ mt: 1, mr: 1 }}
                             >

src/Components/Password/Steps/password.jsx

 import React from 'react'
 import * as Yup from 'yup';
-import { useState } from 'react';
 import { useFormik, Form, FormikProvider } from 'formik';
 
 import {  
     Box, Button,
     Stack, TextField, 
-    InputLabel,MenuItem,FormControl,Select
 } from '@mui/material';
 
 import DateFnsUtils from '@date-io/date-fns';
 import { DesktopDatePicker, LocalizationProvider } from '@mui/lab';
 
-import { niveles_educativos } from '../Rows'
 
 export function Password(props) {
 
-    const [educativo, setEducativo] = useState('');
-
-    const changeNivelEducativo = (event) => {
-        setEducativo(event.target.value);
-    };
-
     const PasswordSchema = Yup.object().shape({
         pwd: 
         Yup
     });
 
     let {  handleNext, handleBack, password, setPassword } = props
+    console.log(password, setPassword)
 
     const formik = useFormik({
         initialValues: {

src/Components/Password/Steps/puesto.js

                                 {'Siguiente'}
                             </Button>
                             <Button
-                                disabled={false}
+                                disabled={true}
                                 onClick={handleBack}
                                 sx={{ mt: 1, mr: 1 }}
                             >
         </FormikProvider>
     );
 }
-const top100Films = [
-    { label: 'City of God', year: 2002 },
-    { label: 'Se7en', year: 1995 },
-    { label: 'The Silence of the Lambs', year: 1991 },
-    { label: "It's a Wonderful Life", year: 1946 },
-    { label: 'Life Is Beautiful', year: 1997 },
-    { label: 'The Usual Suspects', year: 1995 },
-    { label: 'Grave of the Fireflies', year: 1988 },
-    { label: 'Paths of Glory', year: 1957 },
-    { label: 'Django Unchained', year: 2012 },
-    { label: 'The Shining', year: 1980 },
-    { label: 'WALL·E', year: 2008 },
-    { label: 'American Beauty', year: 1999 },
-    { label: 'The Dark Knight Rises', year: 2012 },
-];
-
-