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.