MuiltSelect with mui

MuiltSelect.tsx

import { TextField } from '@mui/material';
import Autocomplete from '@mui/material/Autocomplete';
import { useFormikContext } from 'formik';
import React from 'react';


type OptionsValues = {
  title: string,
  value: string
}

type Props = {
  id: string,
  name: string,
  label: string,
  options: OptionsValues[]
}

function MuiltSelect(props: Props) {
  const { options, name, label, id } = props

  const formik = useFormikContext();

  return (
    <Autocomplete
      {...props}
      multiple
      options={options}
      getOptionLabel={(option: any) => option.title}
      onChange={(_, value) => formik.setFieldValue(name, value)}
      filterSelectedOptions
      isOptionEqualToValue={(item: any, current: any) => item.value === current.value}
      renderInput={(params) => (
        <TextField
          {...params}
          id={id}
          name={name}
          label={label}
          variant={"outlined"}
          onChange={formik.handleChange}
          error={formik.touched[name] && Boolean(formik.errors[name])}
          helperText={formik.errors[name]}
          value={formik.values[name]}
          fullWidth
        />
      )
      }
    />
  )
}


export default MuiltSelect

in this case we use the formik context to update the state

<MuiltSelect
id="my-autocomplete"
name="myAutocomplete"
label="My Autocomplete"
onChange{formik.handleChange}
value={values.myAutocomplete}
error={Boolean(touched.myAutocomplete && errors.myAutocomplete)}
helperText={touched.myAutocomplete && errors.myAutocomplete}
helperText={formik.errors['myAutocomplete']}
error={true}
/>`

like this?
`

this doesn't work because the autocomplete set value is different from other inputs, you need to pass FormikProvider around your form and this code will works

example: https://gist.github.com/sibelius/0c4bb9f1ef7e166587a97695445e0729#file-formuseformik-tsx-L27

thanks