migrate from formik to other alternative

src/Components/Modal/EditPlaza.js

         queryClient.invalidateQueries('puestos')
       },
       onError:() => {
-        close();
-        setOpen(false)
+        //close();
+        //setOpen(false)
         toast.error("Lo sentimos ocurrió error inténtalo más tarde")
       }
     })
         let { areadeptoplz_id, fecha, tests } = response.data;
         let temp_test = tests.map( t => ({ id : t.id} ))
         setChecklist(temp_test.map( t => t.id))
-        reset({...response.data, areadepto : areadeptoplz_id, fecha : new Date(fecha) , tests : temp_test  })
+        reset({...response.data, aredepto : areadeptoplz_id, fecha : new Date(fecha) , tests : temp_test  })
       })
       .catch(console.log)
   },[visible, auth,reset])
                 <FormControl fullWidth>
                   <InputLabel>Departamento</InputLabel>
                   <Controller
-                    helperText={errors.areadepto?.message}
-                    error={Boolean(errors?.areadepto)}
+                    helperText={errors.aredepto?.message}
+                    error={Boolean(errors?.aredepto)}
                     name="aredepto"
                     control={control}
                     render={ ({field}) =>

src/Components/Modal/MostrarPlaza.js

 function Mostrar(props) {
 
     let { visible, puesto } = props
+  console.log("PUESTO: ", puesto)
     const opciones = { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' };
     const close = () => props.toggle("VER");
 
                                 name="sku" readOnly />
                             <div>
                                 {
-                                    puesto
+                                    puesto && visible
                                     ? puesto.tests.map( ( {decription, id} ) => 
                                         (<Chip color="primary" key={id} label={decription}/>)
                                     ) : null

src/Pages/Puestos.jsx

 
   const toggle = useCallback((type, puesto) => {
    // console.log('usecall: ',puesto)
-    // setPuesto(puesto)
+    setPuesto(puesto)
     switch (type) {
       case "VER": {
         setShow(!show);
       }
       default: break;
     }
-  }, [edit, del, show])
+  }, [del, show])
 
 
   if(isLoading){