用状态重新排序组件时出现问题

我有一个带有输入文本字段的组件（SingleItem在下面的代码中调用）。为了存储和更新此文本字段的值，我使用了useState钩子。

现在，父组件可以具有的多个实例，SingleItem也可以对其重新排序。

问题在于，在对它们重新排序之后，它们的状态似乎保持相同的顺序。我的理解是，挂钩依赖于调用顺序，因此可以对其进行解释。

我的问题是，实施此方案的正确方法是什么。我认为这ReorderComponents可以保持所有状态，SingleItems但是随后传递用于更新的lambda会变得混乱。

function SingleItem(props: {item: string}) {
    const [value, setValue] = useState<string>(props.item);
    return <div>
        <TextField value={value} onChange={(e) => setValue(e.target.value)}/>
        <span>Input arg: {props.item}</span>
    </div>;
}

function ReorderComponents() {
    const [items, setItems] = React.useState(["a", "b", "c"]);
    return (
        <div className="App">
            {items.map(number => (
                <SingleItem item={number}/>
            ))}
            <Button variant={'contained'} onClick={() => setItems([...items.reverse()])}>Reverse</Button>
        </div>
    );
}

这是单击按钮后发生的情况。