autoComplete mui component with formik

[Yassin-Samir]

the touched object in the formik context doesn't change correctly when the autcomplete compoment is clicked on
here is the errors object and touched object

{
    "errors": {
        "Subject": "required",
        "ExaminerBoard": "required",
        "header": "required",
        "description": "required"
    },
    "touched": {
        ":r2:": true
    }
}

it is suppose to be

{
    "errors": {
        "Subject": "required",
        "ExaminerBoard": "required",
        "header": "required",
        "description": "required"
    },
    "touched": {
        "Subject": true
    }
}

here is the code

import {
  FormControl,
  Autocomplete,
  TextField,
} from "@mui/material";
import { useFormikContext, Field } from "formik";
import { useState } from "react";

function FormikAutoComplete({ name, label, list, ...props }) {
  const { errors, touched, isSubmitting, setFieldValue, handleBlur, values } =
    useFormikContext();
  const [InputValue, setInputValue] = useState("");
  console.log({ errors, touched });
  return (
    <FormControl fullWidth>
      <Field
        as={Autocomplete}
        disabled={isSubmitting}
        name={name}
        options={list}
        inputValue={InputValue}
        onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
        onChange={(event, newValue) => setFieldValue(name, newValue)}
        sx={{ maxHeight: "200px" }}
        MenuProps={{
          style: {
            maxHeight: "350px",
          },
        }}
        isOptionEqualToValue={(option, value) => option.code === value}
        renderInput={(params) => (
          <TextField
            helperText={Boolean(touched[name]) && errors[name]}
            error={Boolean(errors[name]) && Boolean(touched[name])}
            {...params}
            label={label || name}
          />
        )}
        {...props}
      />
      {/*  {Boolean(errors[name]) && Boolean(touched[name]) ? (
        <FormHelperText error={Boolean(errors[name])}>
          {errors[name]}
        </FormHelperText>
      ) : null} */}
    </FormControl>
  );
}

export default FormikAutoComplete;