delete Handler for Table 2 is not working as intended

Question

Here are all the state maintained,

  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phoneno, setPhoneno] = useState('');

  const [data, setData] = useState([]);  //TABLE 1
  const [dataTwo, setDataTwo] = useState([]);  //TABLE 2

Need to create form with name, age, email with Add Button

        <form onSubmit={submitHandler}>
          <div>
            <label>Name</label>
            <input type="text" onChange={nameHandler} value={name}></input>
          </div>
          <div>
            <label>Email</label>
            <input type="email" onChange={emailHandler} value={email}></input>
          </div>
          <div>
            <label>Phone No</label>
            <input type="text" onChange={phoneHandler} value={phoneno}></input>
          </div>
          <div>
            <button type="submit">Add</button>
          </div>
        </form> 

When ADD button is pressed, data will be transferred to Table 1

Table 1 has content and DELETE button ,

   <div>
       <h2>Table 1</h2>
     </div>
     <div>
       <ul>
         {data.map((item) => (
           <div>
             <li>
               {item.name} - {item.email} - {item.phoneno}{' '}
               <button onClick={() => deleteTableOneHandler(item)}>
                 Delete
               </button>
             </li>
           </div>
         ))}
       </ul>
     </div> 

const deleteTableOneHandler = (deleteitem) => {
 setData(data.filter((item) => item !== deleteitem));
 setDataTwo((value) => [...value, deleteitem]);
};

When delete button is pressed, Data from table 1 will be added to Table 2, And Data from table 1 is deleted

Likewise when data is deleted from Table 2, Data Will be added back to table 1

      <div>
          <h2>Table 2</h2>
        </div>
        <div>
          <ul>
            {dataTwo.map((item) => (
              <div>
                <li>
                  {item.name} - {item.email} - {item.phoneno}{' '}
                  <button onClick={() => deleteTableTwoHandler(item)}>
                    Delete
                  </button>
                </li>
              </div>
            ))}
          </ul>
        </div>

    const deleteTableTwoHandler = (deleteitem) => {
    setDataTwo(data.filter((item) => item !== deleteitem));
    setData((value) => [...value, deleteitem]);
  };

Everything is working as required, only when I delete Data from Table 2, it doesn't respond as intended.

Answer 1

I found what is wrong with your code

Problem

In your deleteTableTwoHandler there is a logical mistake

const deleteTableTwoHandler = (deleteitem) => {
    setDataTwo(data.filter((item) => item !== deleteitem)); // Here is the problem
    setData((value) => [...value, deleteitem]);
};

Solution

const deleteTableTwoHandler = (deleteitem) => {
    setDataTwo(dataTwo.filter((item) => item !== deleteitem)); // data => dataTwo
    setData((value) => [...value, deleteitem]);
};

---

Explain

data contains all the data in the table 1, so when you press delete button in table 2, data.filter will loop all data in table 1 even if it is not in table 2, so table 2 will have all table 1 values except the one that you deleted because it will be filtered.