correct register behavior

src/App.css

     justify-content: flex-start;
 }
 
-.MuiButton-root:hover{
-    background-color : #fd4b4b !important;
-}
+/* .MuiButton-root:hover{ */
+    /* background-color : #fd4b4b !important; */
+/* } */
+
 .css-ghsjzk-MuiInputBase-root-MuiInput-root:before{
     border : none !important;
 }
-
 .login_link{
     color : #2ec5d3;
 }
-
+.registerBtn{
+    background-color: #fd4b4b !important;
+}
 .login_link:hover{
     font-weight : bold;
     color : #3ec5d3;
 }
+.MuiStepIcon-root.Mui-completed{
+    color: #fd4b4b !important;
+}
+.MuiStepIcon-root.Mui-active {
+    color: #fd4b4b !important;
+}
 

src/Components/Register/PersonalInfo.js

 import * as Yup from 'yup';
 
 import { 
-    Stack, TextField,
+    Stack, TextField,Box, Button
 } from '@mui/material';
 
-export function PersonalInfo() {
+export function PersonalInfo(props) {
 
     // let navigate = useNavigate()
 
+    const steplen = 2
     const RegisterSchema = Yup.object().shape({
         nit: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado largo!').required('El nit es requerido'),
         cui: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!').required('Tu CUI/DPI es requerido'),
                             type="date"
                             label="Fecha de nacimiento"
                             fullWidth
-                            defaultValue={'2021-01-10'}
                             InputLabelProps={{ shrink: true, required: true }}
                             {...getFieldProps('nacimiento')}
                             error={Boolean(touched.nacimiento && errors.nacimiento)}
                         />
                     </Stack>
 
+                  <Box sx={{ mb: 2 }}>
+                    <div style={{ paddingTop  : 15}}>
+                      <Button
+                        type="submit"
+                        className="registerBtn" 
+                        variant="contained"
+                        // onClick={handleNext}
+                        sx={{ mt: 1, mr: 1 }}
+                      >
+                        {props.index === steplen - 1 ? 'Registrarme' : 'Siguiente'}
+                      </Button>
+                      <Button
+                        onClick={props.handleBack}
+                        sx={{ mt: 1, mr: 1 }}
+                      >
+                        Regresar
+                      </Button>
+                    </div>
+                  </Box>
+
+
+
 
                 </Stack>
             </Form>

src/Components/Register/RegisterForm.jsx

 import * as Yup from 'yup';
 import { useState } from 'react';
 import { useFormik, Form, FormikProvider } from 'formik';
-// import { useNavigate } from 'react-router-dom';
 import { Icon } from '@iconify/react';
 
-import { 
+import {  
+    Box, Button,
     Stack, TextField, IconButton, InputAdornment, 
-    Backdrop, CircularProgress,
 } from '@mui/material';
 
 import eyeFill from '@iconify/icons-eva/eye-fill';
 import eyeOffFill from '@iconify/icons-eva/eye-off-fill';
-import { Toaster } from 'react-hot-toast';
 // import { V1, V2 } from '../../Utils/HTTP'
 
-export function RegisterForm() {
+export function RegisterForm(props) {
+
+    const steplen = 2;
 
-    // const navigate = useNavigate();
     const [showPassword, setShowPassword] = useState(false);
-    const [open, setOpen] = React.useState(false);
-    const handleClose = () => {
-        setOpen(false);
-    };
-    
-    // let navigate = useNavigate()
+    const [showPasswordTwo, setShowPasswordTwo] = useState(false);
 
     const RegisterSchema = Yup.object().shape({
-        firstName: Yup.string()
-        .min(2, 'Demasiado corto!')
-        .max(50, 'Demasiado largo!')
-        .required('Tu nombre es requerido'),
+        firstName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado largo!').required('Tu nombre es requerido'),
         lastName: Yup.string().min(2, 'Demasiado corto!').max(50, 'Demasiado Largo!').required('El apellido es requerido'),
         email: Yup.string().email('El correo no es valido').required('Email es requerido'),
         password: Yup.string().min(5, 'La contraseña debe contener mínimo 5 caracteres').required('la contraseña es requerida'),
         password_confirm: Yup.string().required('Las contraseñas no coincidien').oneOf([Yup.ref('password'), null], 'Las contraseñas no coincidien')
     });
 
-    const formik = useFormik({
+    let {client, setClient } = props
 
+    const formik = useFormik({
         initialValues: {
-            firstName: '',
-            lastName: '',
-            email: '',
-            password: '',
-            password_confirm: ''
+            firstName: client.firstName,
+            lastName: client.lastName,
+            email: client.email,
+            password: client.password,
+            password_confirm: client.password_confirm
+        },
+        onSubmit: (fields) => {
+            setClient({ ...fields })
+            props.handleNext()
         },
         validationSchema: RegisterSchema,
-        onSubmit: async (values) => {
-            // setOpen(true);
-            let body = {
-                nombre : values.firstName,
-                apelidos : values.lastName,
-                email : values.email,
-                username : values.email,
-                pwd : values.password,
-                "nit": "5345435",
-                "cui": "555555",
-                "direccio": "4 calle zona 1",
-                "fechacumple": "2021-01-01",
-                "telefono" : "45435345",
-            }
-
-            let url = 'http://204.48.25.93:8081/registro'
-            console.log(body, url)
-            // let url = 'http://psicoadmin.ditca.org:8081/registro'
-            // V1(url, body);
-            // V2(url, body);
-            setOpen(false)
-            //
-        }
-
     });
 
-    const { errors, touched, handleSubmit, getFieldProps } = formik;
+    const {errors, touched, handleSubmit, getFieldProps } = formik;
 
     return (
         <FormikProvider style={{ padding : 15 }} value={formik}>
 
                     <TextField
                         fullWidth
-                        type={showPassword ? 'text' : 'password'}
+                        type={showPasswordTwo ? 'text' : 'password'}
                         label="Confirma contraseña"
                         {...getFieldProps('password_confirm')}
                         InputProps={{
                             endAdornment: (
                                 <InputAdornment position="end">
-                                    <IconButton edge="end" onClick={() => setShowPassword((prev) => !prev)}>
-                                        <Icon icon={showPassword ? eyeFill : eyeOffFill} />
+                                    <IconButton edge="end" onClick={() => setShowPasswordTwo((prev) => !prev)}>
+                                        <Icon icon={showPasswordTwo ? eyeFill : eyeOffFill} />
                                     </IconButton>
                                 </InputAdornment>
                             )
                     />
 
 
-        {/*
-            <Button 
-            type="submit"
-            size="large"
-            style={{ backgroundColor : '#d32f2f'}}
-            variant="contained" >
-            Registrarme
-            </Button>
-            */
-        }
+                  <Box sx={{ mb: 2 }}>
+                    <div style={{ paddingTop  : 15}}>
+                      <Button
+                        type="submit"
+                        className="registerBtn" 
+                        variant="contained"
+                        // onClick={handleNext}
+                        sx={{ mt: 1, mr: 1 }}
+                      >
+                        {props.index === steplen - 1 ? 'Registrarme' : 'Siguiente'}
+                      </Button>
+                      <Button
+                        onClick={props.handleBack}
+                        sx={{ mt: 1, mr: 1 }}
+                      >
+                        Regresar
+                      </Button>
+                    </div>
+                  </Box>
 
                 </Stack>
             </Form>
-            <Toaster
-                position="top-left"
-                reverseOrder={false}
-            />
-            <Backdrop
-                sx={{ color: '#fd4b4b', zIndex: (theme) => theme.zIndex.drawer + 1 }}
-                open={open}
-                onClick={handleClose}
-            >
-                <CircularProgress color="inherit" />
-            </Backdrop>
         </FormikProvider>
     );
 }

src/Pages/Register.jsx

     padding: theme.spacing(12, 0)
 }));
 
-const steps = [
-    {
-        label: 'Información de tu cuenta',
-        description: <RegisterForm/>
-    }, {
-        label: 'Datos Personales',
-        description: <PersonalInfo/>
-    },
-];
 
 export function Register() {
 
     }, [auth,navigate])
 
     const [activeStep, setActiveStep] = React.useState(0);
+    const [client, setClient] = React.useState({
+        firstName: 'Ming',
+        lastName: '',
+        email: '',
+        password: '',
+        password_confirm: '',
+        nit: "5345435",
+        cui: "555555",
+        direccion: "4 calle zona 1",
+        fechacumple: "2021-01-01",
+        telefono : "45435345",
+    });
 
     const handleNext = () => {
         setActiveStep((prevActiveStep) => prevActiveStep + 1);
         setActiveStep(0);
     };
 
+    const steps = [
+        {
+            label: 'Información de tu cuenta',
+            description: 
+            <RegisterForm 
+            client={client} 
+            setClient={setClient} 
+            handleBack={handleBack}
+            handleNext={handleNext}
+            />
+        }, 
+        {
+            label: 'Datos Personales',
+            description: 
+            <PersonalInfo 
+            client={client} 
+            setClient={setClient} 
+            handleBack={handleBack}
+            />
+        },
+    ];
+
     return (
         <RootStyle title="Register | Minimal-UI">
 
             >
               {step.label}
             </StepLabel>
-        <StepContent style={{ padding : 25}}>
-              {step.description}
-              <Box sx={{ mb: 2 }}>
-                <div style={{ paddingTop  : 15}}>
-                  <Button
-                    variant="contained"
-                    onClick={handleNext}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    {index === steps.length - 1 ? 'Registrarme' : 'Siguiente'}
-                  </Button>
-                  <Button
-                    disabled={index === 0}
-                    onClick={handleBack}
-                    sx={{ mt: 1, mr: 1 }}
-                  >
-                    Regresar
-                  </Button>
-                </div>
-              </Box>
-            </StepContent>
-          </Step>
+            <StepContent style={{ padding : 25}}>
+                  {step.description}
+                </StepContent>
+              </Step>
         ))}                    
                     </Stepper>
  {activeStep === steps.length && (