Puesto superior logic

src/Components/Modal/AgregarManual.js

 const filter = createFilterOptions();
 
 async function getPuestoSuperior(puesto, auth) {
-  if (puesto.length < 3) return []
+  if (puesto.length < 2) return []
   let rest = new Service(`/plaza/keypuestosup?keyword=${puesto}`)
   let result = await rest.get(auth.token)
   // console.log(result)
   if (result?.data?.length > 0) {
-    result = result.data.map((item) => ({ 'title': item.nombre, year: item.id }))
+    result = result.data.map((item) => ({ 'title': item.nombre, id: item.id }))
     return result;
   }
   return [];
 }
 
+async function savePuestoSuperior(input, auth) {
+  let rest = new Service("/plaza/puestosuperior")
+  let body = {
+    "active": 1,
+    "nombre": input.title,
+    "decription": input.id,
+    "modifyday": "2023-02-12T23:55:26.007",
+    "createday": "2023-02-12T23:55:26.007",
+    "id": null,
+    "descripction": input.id,
+    "modify_day": "2023-02-12T23:55:26.007",
+  }
+  let result = await rest.post(body, auth.token);
+  let { id, nombre } = result;
+  return { id, nombre }
+}
+
 
 function Manual(props) {
 
 
   const NewPlazaSchema = Yup.object().shape({
     nombrepuesto: Yup.string().required('El nombre es requerido').min(5, "El nombre del  puesto debe ser mayor a 5 caracteres").max(100),
-    puestosuperior: Yup.string().required("El puesto es requerido").min(5, "El nombre del  puesto debe ser mayor a 5 caracteres").max(30),
+    puestosuperior: Yup.number().required("El puesto superior es requerido"),
     aredepto: Yup.number().required('Escoge alguna área'),
     fecha: Yup.date("Ingresa una fecha válida"),
     notas: Yup.string("Ingresa una nota válida").min(5, "Ingresa una nota válida").max(150),
   const [options, setOptions] = React.useState([]);
   const [dialogValue, setDialogValueHook] = React.useState({
     title: '',
-    year: '',
+    id: '',
   });
 
   let setDialogValue = (value) => {
-    console.log('llamada', value)
+    // console.log('llamada', value)
     // setValues({...values, puestosuperior: value?.title })
     setDialogValueHook(value)
   }
   const handleCloseDialog = () => {
     setDialogValue({
       title: '',
-      year: '',
+      id: '',
     });
     toggleOpenDialog(false);
   };
 
 
-  const handleSubmitDialog = (event) => {
+  const handleSubmitDialog = async (event) => {
     event.preventDefault();
+    console.log('to save: ', dialogValue)
+    let { id, nombre } = await savePuestoSuperior(dialogValue, auth)
+    if (id) {
+      setDialogValue({
+        title: nombre,
+        id: id,
+      });
+    }
+
     setDialogValue({
       title: dialogValue.title,
-      year: parseInt(dialogValue.year, 10),
+      id: dialogValue.id
     });
     handleCloseDialog();
   };
   const AutoCompleteChange = (event, newValue) => {
     console.log('newValue', newValue)
     // TODO : formik logic to validate autocomplete
+    setValues({ ...values, puestosuperior: newValue?.id })
 
     if (typeof newValue === 'string') {
       setTimeout(() => {
         toggleOpenDialog(true);
         setDialogValue({
           title: newValue,
-          year: '',
+          id: '',
         });
       });
     } else if (newValue && newValue.inputValue) {
       toggleOpenDialog(true);
       setDialogValue({
         title: newValue.inputValue,
-        year: '',
+        id: '',
       });
     } else {
       setDialogValue(newValue);
   const formik = useFormik({
     initialValues: {
       nombrepuesto: "",
-      puestosuperior: "",
+      puestosuperior: null,
       aredepto: 1,
       fecha: date,
       notas: "",
               <TextField
                 margin="dense"
                 id="name"
-                value={dialogValue?.year}
+                value={dialogValue?.id}
                 onChange={(event) =>
                   setDialogValue({
                     ...dialogValue,
-                    year: event.target.value,
+                    id: event.target.value,
                   })
                 }
                 label="Descripción"
                               setOptions([]);
                               setDialogValue({
                                 title: event.target.value,
-                                year: '',
+                                id: '',
                               });
                             },
                             endAdornment: (