Reactjs React-Formik多选下拉列表在值数组更新时禁用所有选项

我对react还不熟悉，尝试使用react和使用ant design的formik创建一个多选下拉列表。它当前在初始加载时填充所有正确的数据（禁用/启用选择选项），但是，当我更新数据数组以启用其他选项时，它会禁用每个选项。当我用控制台记录数据时，阵列会正确更新，但我不明白为什么所有选项都被禁用。任何帮助都将不胜感激

以下是填充应启用的选项数组的数据片段：

   const data = values.NPTRates.filter((rate) => {
    if (rate.NonProductiveTimeTypeId === 24) {
      return rate.DivisionId;
    }
    return null;
  });

填充数据的多选组件元素：

                  <DivisionMultiSelect
                    name="Divisions"
                    value={values.Divisions}
                    multiSelect={data}
                    onChange={(val) => {
                      setFieldValue('Divisions', val);
                    }}
                  />

{
setFieldValue（'Divisions'，val）；
}}
/>

以及呈现下拉列表的实际组件：

render() {
return (
  <Select
    value={this.props.value}
    name={this.props.name}
    className={this.props.cssClass}
    disabled={this.props.disabled}
    onChange={this.props.onChange}
    mode="multiple"
    showSearch
    filterOption={(input, option) => option.props.children.toLowerCase()
      .indexOf(input.toLowerCase()) >= 0}
    size="large"
  >
    {
      this.state.data.map(opt => (
        <Option
          disabled={this.props.multiSelect.find(data => data.DivisionId !== opt.Id)}
          key={opt.Id}
          value={opt.Id}
        >
          {opt.Name}
        </Option>
      ))
    }
  </Select>
);

render（）{
返回(
option.props.children.toLowerCase（）
.indexOf（input.toLowerCase（））>=0}
size=“大”
>
{
this.state.data.map（opt=>(
data.DivisionId！==opt.Id）}
key={opt.Id}
值={opt.Id}
>
{opt.Name}
))
}
);

}

---

}

我能够通过在查找过程中使用筛选方法来解决问题

              disabled={this.props.multiSelect
            .filter(data => data.DivisionId === opt.Id).length === 0
            || this.props.multiSelect.length === 0}

---

我能够通过在find上使用filter方法来解决这个问题

              disabled={this.props.multiSelect
            .filter(data => data.DivisionId === opt.Id).length === 0
            || this.props.multiSelect.length === 0}

你能在Stackblitz或codepen添加一个例子吗？你能在Stackblitz或codepen添加一个例子吗？