React组件更新混乱

问题场景

（为了方便写，省略到不重要的参数等内容o(TωT)o  ）

一个Modal组件，使用react的状态来记录3个checkbox的选中状态，存放在一个map里面

const Modal = ( )=>{
    const [checkedItems, setCheckedItems] = useState<{ [key: string]: any }>({
        'check.a':false,
        'check.b':false,
        'check.c':false
    })
    
    return (
        <div>
            <div className="flex items-center gap-2">
                <Checkbox id="check.a" onChange={handleCheckboxChange} checked={checkedItems['feedback.a']} />
                <Label>选项a</Label>
            </div>
            <div className="flex items-center gap-2">
                <Checkbox id="check.b" onChange={handleCheckboxChange} checked={checkedItems['feedback.b']} />
                <Label>选项b</Label>
            </div>
            <div className="flex items-center gap-2">
                <Checkbox id="check.c" onChange={handleCheckboxChange} checked={checkedItems['feedback.c']} />
                <Label>选项c</Label>
            </div>
        </div>
    )
}

然后在界面上需要根据一个list去动态地创建若干个Model组件

list.map(item => {
    <Modal>
})

我原本的设想是通过切换list的内容，就可以让<Model>组件集合不断地刷新，但是出现一个很疑惑的问题，假设我这里有两个list，分别为list1={elem1,elem2,elem3},list1={elem4,elem5,elem6,elem7}，在使用list1时，我更改了elem2所对应的<Model>内的checkbox（也就是第二个Model），在切换到list2时，按照设想，Model集合应该被刷新为全新的4个，但是elem5（第二个）所对应的Model依然保留了elem2被选中的选项。

查阅了相关资料，云里雾里的，试出了2个解决办法。

解决方法一（推荐）：

在创建Modal时对key参数进行唯一赋值。可能的原因是，react是通过对DOM树中组件的Key进行对比来确定需要被刷新的组件，但我没有赋值（可能react会赋予其一个随机的key），这导致切换list后，虽然我认为Model集合应该被更新，但react可不这么认为，它认为从list1切换到list2时，前3个元素是不变的，只是多了第4个，所以保留了之前的状态。

list.map(item => {
    <Modal key={`${list_name}-${list_index}`}>
})

解决方法二：

在Model组件初始化时对状态进行重新赋值，比较笨，但是有效的办法🤡

useEffect(() => {
    setCheckedItems({
        'check.a':false,
        'check.b':false,
        'check.c':false
    }
},[])