如何在reactjs中将删除列表从数组推送到空数组

import React, { useState } from 'react';

const MyComponent = () => {
  const [originalList, setOriginalList] = useState([]);
  const [deletedList, setDeletedList] = useState([]);
  
  // 其他组件代码...
}

const handleDelete = (item) => {
  // 从原始数组中删除指定元素
  const updatedList = originalList.filter((el) => el !== item);
  
  // 将删除的元素推送到空数组中
  setDeletedList([...deletedList, item]);
  
  // 更新原始数组
  setOriginalList(updatedList);
};

const MyComponent = () => {
  // 状态变量和删除函数...
  
  return (
    <div>
      <h2>原始数组：</h2>
      <ul>
        {originalList.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      
      <h2>删除的数组：</h2>
      <ul>
        {deletedList.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};