将列表中的项插入处于react状态的另一个列表中

const [sourceList, setSourceList] = useState([]);
const [targetList, setTargetList] = useState([]);

const insertItem = (index) => {
  const itemToInsert = sourceList.splice(index, 1)[0];
  setSourceList([...sourceList]);
  setTargetList(targetList.concat(itemToInsert));
};

return (
  <div>
    <h2>原始列表</h2>
    <ul>
      {sourceList.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
    <h2>目标列表</h2>
    <ul>
      {targetList.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
    <button onClick={() => insertItem(index)}>插入</button>
  </div>
);