如何使用Material-Ui多选复选框自动完成Formik的字段组件？

import React from 'react';
import { useFormik } from 'formik';
import { Checkbox, FormControlLabel, FormGroup, TextField } from '@material-ui/core';

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];

const MultiSelectCheckbox = () => {
  const formik = useFormik({
    initialValues: {
      fruits: [],
    },
    onSubmit: values => {
      console.log(values);
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <FormGroup>
        {options.map(option => (
          <FormControlLabel
            key={option.value}
            control={
              <Checkbox
                checked={formik.values.fruits.includes(option.value)}
                onChange={formik.handleChange}
                name="fruits"
                value={option.value}
              />
            }
            label={option.label}
          />
        ))}
      </FormGroup>
      <TextField
        id="fruit-search"
        label="Search fruits"
        variant="outlined"
        onChange={event => {
          // 这里可以根据输入的值来过滤 options，实现自动完成
        }}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default MultiSelectCheckbox;