Formik复选框不会重新呈现

import React from 'react';
import { Formik, Form, Field } from 'formik';

const initialValues = {
  options: [],
};

const App = () => {
  const handleCheckboxChange = (value, setFieldValue) => {
    const options = [...formik.values.options]; // 创建一个新的数组副本
    const index = options.indexOf(value);

    if (index > -1) {
      options.splice(index, 1); // 从数组中移除选中的值
    } else {
      options.push(value); // 将选中的值添加到数组中
    }

    setFieldValue('options', options); // 更新Formik中对应字段的值
  };

  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
      {formik => (
        <Form>
          <label>
            <Field
              type="checkbox"
              name="options"
              value="option1"
              onChange={() => handleCheckboxChange('option1', formik.setFieldValue)}
            />
            Option 1
          </label>
          <label>
            <Field
              type="checkbox"
              name="options"
              value="option2"
              onChange={() => handleCheckboxChange('option2', formik.setFieldValue)}
            />
            Option 2
          </label>
          {/* 其他复选框 */}
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
};

export default App;