add user to list in password

src/Components/Modal/AgregarManual.js

                     fullWidth
                     {...getFieldProps('nombrepuesto')}
                     error={Boolean(touched.nombrepuesto && errors.nombrepuesto)}
-                    helperText={touched.nombrepuesto && errors.nombrepuesto}
                     />
 
                   <FormControl fullWidth>
                       label="Puesto Superior"
                       onChange={changePuestoSup}
                       {...getFieldProps('puestosuperior')}
-                      helperText={touched.puestosuperior && errors.puestosuperior}
                       error={Boolean(touched.puestosuperior && errors.puestosuperior)} >
                       {
                       data ?

src/Components/Modal/PasswordModal.jsx

 import * as React from 'react';
 
 import {
-  Box, Stepper, Step, Fade,
+  Box, Stepper, Step,
   StepLabel, Button, Typography
 } from '@mui/material'
 
     pwd: "",
     deadpwd: now.current,
     dateToActived: now.current,
-    nombres: "",
-    apellidos: "",
-    mail: "",
     sendmail: true,
     nombrepuesto: null,
     nombreEmpresa: null,
+    candidatos : [{
+      'nombres': 'ming',
+      'apellidos': 'mecca',
+      'mail': 'ming@gmail.com',
+    }]
   });
 
   const isStepSkipped = (step) => {
       pwd: "",
       deadpwd: now.current,
       dateToActived: now.current,
-      nombres: "",
-      apellidos: "",
-      mail: "",
       sendmail: true,
       nombrepuesto: null,
       nombreEmpresa: null,

src/Components/Password/Steps/MailTable.jsx

 import TableRow from '@mui/material/TableRow';
 import Paper from '@mui/material/Paper';
 
-import { RemoveSharp, DisabledByDefault } from '@mui/icons-material'
+import { DisabledByDefault } from '@mui/icons-material'
 
-function createData(name, calories, fat) {
-  return { name, calories, fat, icon : <DisabledByDefault color="primary"/>};
-}
+export function MailTable(props) {
 
-const rows = [
-  createData('Frozen yoghurt', 159, 6.0, ),
-  createData('Ice cream sandwich', 237, 9.0),
-  createData('Eclair', 262, 16.0, ),
-  createData('Cupcake', 305, 3.7,),
-  createData('Gingerbread', 356,21),
-];
+  let { users, remove } = props;
 
-export function MailTable() {
   return (
     <TableContainer component={Paper}>
       <Table aria-label="simple table">
           </TableRow>
         </TableHead>
         <TableBody>
-          {rows.map((row) => (
-            <TableRow key={row.name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }} >
+          {users.map((row,i) => (
+            <TableRow key={i} sx={{ '&:last-child td, &:last-child th': { border: 0 } }} >
               <TableCell component="th" scope="row">
-                {row.name}
+                {row.mail}
+              </TableCell>
+              <TableCell align="right">{row.nombres}</TableCell>
+              <TableCell align="right">{row.apellidos}</TableCell>
+              <TableCell align="right">
+                <DisabledByDefault onClick={() => remove(row.mail)} color="primary"/>
               </TableCell>
-              <TableCell align="right">{row.calories}</TableCell>
-              <TableCell align="right">{row.fat}</TableCell>
-              <TableCell align="right">{row.icon}</TableCell>
             </TableRow>
           ))}
         </TableBody>

src/Components/Password/Steps/candidato.jsx

 import { useFormik, Form, FormikProvider } from 'formik';
 
 import {
-  Box, Button, FormControlLabel, Checkbox,
-  Stack, TextField, FormGroup, Divider, Typography,
+  Box, Button, Stack, TextField, Divider, Typography,
 } from '@mui/material';
 
+import { AddCircle } from '@mui/icons-material/';
+
 import { MailTable } from './MailTable';
 
 
 export function Candidato(props) {
 
+
   const CandidatoSchema = Yup.object().shape({
     nombres:
       Yup.string()
 
   const formik = useFormik({
     initialValues: {
-      nombres: password.nombres,
-      apellidos: password.apellidos,
-      sendmail: password.sendmail,
-      mail: password.mail,
+      nombres: "",
+      apellidos: "",
+      sendmail: "",
+      mail: "",
+      candidatos : password.candidatos ? password.candidatos : [],
       nombrepuesto: password.nombrepuesto ? password.nombrepuesto : password.puesto[0].nombrepuesto,
-      // nombreEmpresa: password.nombreEmpresa ? password.nombreEmpresa : auth.getProfile().nombre,
       nombreEmpresa: 'test'//password.nombreEmpresa ? password.nombreEmpresa : auth.getProfile().nombre,
+      // nombreEmpresa: password.nombreEmpresa ? password.nombreEmpresa : auth.getProfile().nombre,
     },
     onSubmit: (fields) => {
       setPassword({ ...password, ...fields })
     validationSchema: CandidatoSchema,
   });
 
-  const { errors, touched, handleSubmit, getFieldProps } = formik;
+  const { errors, touched, handleSubmit, getFieldProps, values } = formik;
+
+  const addToList = () => {
+    let user = {
+      'nombres': values.nombres,
+      'apellidos': values.apellidos,
+      'mail': values.mail,
+    }
+    let new_users = [...password.candidatos, user ]
+
+    setPassword({...password, candidatos: new_users })
+
+    console.log(values);
+  }
+
+  const removeFromList = (umail) => {
+    let without = password.candidatos.filter( user => user.mail !== umail )
+    setPassword({...password, candidatos: without })
+  }
+
 
   return (
     <FormikProvider style={{ padding: 25 }} value={formik}>
               helperText={touched.mail && errors.mail}
             />
 
+            <Button onClick={addToList}>
+              <AddCircle/>
+            </Button>
+
           </Stack>
 
-          <MailTable />
+          <MailTable 
+            remove={removeFromList} 
+            users={password.candidatos}
+            />
 
           <Box sx={{ mb: 2 }}>
             <div style={{ paddingTop: 15 }}>