使用hooks实现todolist时出现bug

当我利用hooks实现todolist功能时出现如下bug：

当Did内元素全部删除时，将todo内元素增加到Did内，Did内已部分删除元素重新出现，

index.js代码如下;

import React, { Component , useState, memo, useMemo, useCallback,  useEffect } from 'react';
import ReactDom from 'react-dom';
import './todo.css'
import 'antd/dist/antd.css';
import { Button, DatePicker } from 'antd';
import { Input } from 'antd';
import { List, Avatar } from 'antd';
import { Layout } from 'antd';

const { Header, Footer, Sider, Content } = Layout;
// TodoList组件
const App=()=>{
  const [inputValue, valueChange] = useState("");
  const [lists1, submitClick1] = useState([]);
  const [lists2,submitClick2] = useState([]);
  const testClick = ()=>{
    if(inputValue==""){
      alert("请输入内容！");
      return;
    }
    valueChange("");
    submitClick1([...lists1, inputValue])
  };
  const Click1 = useCallback( (e)=> {
      lists2.splice(lists2.length,0,lists1[e])
      lists1.splice(e,1);
      submitClick1([...lists1])
      submitClick2([...lists2])
  },[lists1])


  const Click2 = useCallback( (e)=> {
    lists2.splice(e,1);
    submitClick2([...lists2])
  },[lists2])

  useEffect(()=>{
    let data1=JSON.parse(localStorage.getItem('todo'))
    let data2=JSON.parse(localStorage.getItem('did'))
    submitClick1(data1)
    submitClick2(data2)
    console.log('efffect1')
  },[])

  useEffect(()=>{
    localStorage.setItem('todo',JSON.stringify(lists1))
    console.log('efffect2')
  },[lists1])

  useEffect(()=>{
    localStorage.setItem('did',JSON.stringify(lists2))
    console.log('efffect3')
  },[lists2])
  
return (
  <div className="div0">
      <Layout style={{innerWidth:'600px'}}>
      <Header style={{backgroundColor:"black",color:"white"}}>ToDoList</Header>
      <Content>
      <Input
          value={inputValue}
          onChange={(e)=>valueChange(e.target.value)} style={{marginLeft:'10%',width:'70%',float:'left'}}/>
      <Button onClick={testClick} className='btn'>提交</Button>
      </Content>
    <List
     header={<div>Todo</div>}        
     size="large"
     bordered
     split
     dataSource= {lists1}
     renderItem={(item,index)=>(
       <List.Item>
         <div>{item}</div>
         <Button type="primary"  onClick={(e)=>Click1(index)}
       >
       已做</Button>
       </List.Item>
     )}/>
         <List
     header={<div>Did</div>}        
     size="large"
     bordered
     split
     dataSource= {lists2}
     renderItem={(item,index)=>(
       <List.Item>
         <div>{item}</div>
         <Button type="primary"  onClick={(e)=>Click2(index)}
       >
       删除</Button>
       </List.Item>
     )}/>
</Layout>
  </div>
);
}
ReactDom.render(
  <>
  <App></App>
  </>
,document.getElementById("root"));

原因已找到，当点击已做即执行Click1函数时，由于其监听的lists1的状态，即当lists1发生改变时其组件才会更新，此时其记录的为上次lists1变化时的lists1和lists2，当lists1再次发生变化时组件加载未删除元素的lists2

解决：将Click1内的[lists1]删除，解除其对lists1的依赖状态，此时Click1变成每次组件状态变化时更新，bug解决

ps：如有新的解答依然会择优采纳，以上仅为个人观点，如有错漏，欢迎指正