Formik arrayHelpers remove未删除所选项目

import React from 'react';
import { Formik, FieldArray } from 'formik';

const MyForm = () => (
  <Formik
    initialValues={{ items: ['item1', 'item2', 'item3'] }}
    onSubmit={(values) => {
      console.log(values);
    }}
  >
    {({ values, setFieldValue }) => (
      <form onSubmit={formik.handleSubmit}>
        <FieldArray name="items">
          {arrayHelpers => (
            <div>
              {values.items.map((item, index) => (
                <div key={index}>
                  <input
                    type="text"
                    name={`items.${index}`}
                    value={item}
                    onChange={e => {
                      arrayHelpers.replace(index, e.target.value);
                    }}
                  />
                  <button type="button" onClick={() => arrayHelpers.remove(index)}>Remove</button>
                </div>
              ))}
            </div>
          )}
        </FieldArray>
        <button type="submit">Submit</button>
      </form>
    )}
  </Formik>
);

export default MyForm;

{values.items.map((item, index) => (
  <div key={item.id}> {/* 假设每个 item 都有一个唯一的 id */}
    ...
  </div>
))}

const handleRemove = async (index) => {
  // 假设 deleteItem 是一个异步函数
  await deleteItem(values.items[index]);
  arrayHelpers.remove(index);
};