React 表单 UI 未正确反映状态更改

问：

我正在 React 中处理一个嵌套表单，其中用户可以拥有多个表单，每个表单可以有多个部分，每个部分可以有多个下拉列表。我遇到了一个问题，即删除特定下拉列表可以正确更新状态，但不能反映 UI 中正在删除的正确下拉列表。

我有这些状态

const [addConditions, setAddConditions] = useState([[]]);
const {formIndex} = useContext(FormContext);
const [addConditions, setAddConditions] = useState([[]]);
const { formIndex } = useContext(FormContext);
const [eventValues, setEventValues] = useState([{
    // ...other properties
    conditions: [{ locked: [] }],
    // ...
}]);

添加分区

const addSection = () => {
    setAddConditions(prev => [...prev, [""]])
}

添加下拉列表

const addDropdownToSection = (sectionIndex) => {
    setAddConditions(prev => {
        const updated = [...prev];
        updated[sectionIndex].push("");
        return updated;
    });
}

我在 eventValues 中存储下拉值

const handlePropertyInputChange = (outerIndex, innerIndex, stateType="locked", e) => {
        setEventValues(prevValues => {
            let updatedEvents = [...prevValues];
            let updatedConditions = [...updatedEvents[formIndex].conditions];

            if (!updatedConditions[outerIndex]) {
                updatedConditions[outerIndex] = { locked: [] };
            }
            const { name, value } = extractValue(e);
            updatedConditions[outerIndex][stateType][innerIndex] = {
                ...updatedConditions[outerIndex][stateType][innerIndex],
                [name]: value,
            };
            updatedEvents[formIndex].conditions = updatedConditions;
            return updatedEvents;
        });
    };

当我必须删除特定的下拉列表时出现问题

const removePropertyFromCondition = (sectionIndex, propertyIndex) => {
    setEventValues(prevValues => {
        let updateEvents = makeDeepCopy(prevValues)
        let updatedConditions = [...updateEvents[formIndex].conditions];
        updatedConditions[sectionIndex].locked.splice(propertyIndex, 1);
        updateEvents[formIndex].conditions = updatedConditions;
        console.log({updateEvents})
        return updateEvents
    });
    setAddConditions(prev => {
        const updated = makeDeepCopy(prev)
        updated[sectionIndex].splice(propertyIndex, 1);
        return updated;
    });
};

调用时，eventValues 状态会正确更新（如控制台所示），但在 UI 中，删除的始终是该部分的最后一个下拉列表，而不是我想要的下拉列表。在此之后，与下拉列表值的任何交互都会导致应用崩溃。removePropertyFromCondition

如何确保在 UI 中删除正确的下拉列表？

我试图为每个部分分配一个唯一标识符来解决这个问题，但这种方法并没有解决问题。

任何帮助都是值得赞赏的，谢谢