我有checkboxgroup组件（父组件），和checkbox（子组件）。我想处理这两个复选框组组件Fruits和Vegetables在同一页与changeHandler，并获得他们每个人的选中选项。但我得到了这个错误：
未捕获的类型错误：prev[name]不可迭代

interface SelectedOptions {
  [name: string]: string[];
}

const Fruits = [
  {
    label: "Banana",
    value: "Banana",
  },
  {
    label: "Orange",
    value: "Orange",
  },
];

const Vegetable = [
  {
    label: "Carrot",
    value: "Carrot",
  },
  {
    label: "Potatoes",
    value: "Potatoes",
  },
];

export function HomePage() {
  const [checkBoxOptions, setCheckBoxOptions] = useState<SelectedOptions>({});

  const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value, checked, name } = e.target;

    if (checked) {
      setCheckBoxOptions((prev: SelectedOptions) => ({
        ...prev,
        [name]: [...prev[name], value],   /////error is here
      }));
    } else {
      setCheckBoxOptions((prev: SelectedOptions) => ({
        ...prev,
        [name]: [...prev[name].filter((option: string) => option !== value)],
      }));
    }
  };

  return (
    <div>
          <CheckBoxGroup
            checkBoxOptions={Fruits}
            name={"Fruits"}
            changeHandler={changeHandler}
          />
          <CheckBoxGroup
            checkBoxOptions={Vegetable}
            name={"Vegetables"}
            changeHandler={changeHandler}
          />
    </div>
  );
}