使用React的Hooks+ts实现全选和全不选？

import React, { useState, useEffect } from 'react';
import { Input, List } from 'antd';
import Add from './Add';
import Progress from './Progress'
import './index.less';

const Home: React.FC = () => {

const list = [{
    id: 1,
    item: '数字1',
}, {
    id: 2,
    item: '数字2'
}, {
    id: 3,
    item: '数字3'
}, {
    id: 4,
    item: '数字4'
}];

type checkedMap = {
    [id: string]: boolean
}
type item = {
    id: number;
    item?: string;
}
const [checked, setChecked] = useState(false);
const [checkedMap, setCheckedMap] = useState<checkedMap>({});
const handleCheckBox = (e: React.ChangeEvent<HTMLInputElement>, item: item) => {
    const { checked } = e.target;
    const newCheckedMap: any = Object.assign({}, checkedMap, {
        [item.id]: checked,
    })
    let arr = Object.keys(newCheckedMap)
        .map((key) => newCheckedMap[key])
        .filter((item) => item === true);
    if (list.length === arr.length) {
        setChecked(true)
    } else {
        setChecked(false)
    }
   
    setCheckedMap(newCheckedMap);
}
const checkedAll = () => {
    list.forEach((item: item) => checkedMap[item.id] = !checked);
    setChecked(!checked);
}
return (
    <div>

        <div className="mt20">
            <div className="header">
                <Add checked={checked} checkedAll={checkedAll} />
                <ul className="header-ul">
                    <li>数字1</li>
                    <li>数字2</li>
                    <li>数字3</li>
                    <li>数字4</li>
                    <li>数字5</li>
                </ul>
            </div>
            <div className="table">
                <List
                    header={<div>Table</div>}
                    bordered
                    dataSource={list}
                    renderItem={(item: item) => {
                        const checked = checkedMap[item.id] || false;
                        return (
                            <List.Item>
                                <div key={item.id}>
                                    <div className="content">
                                        <Input checked={checked} onChange={(e) => handleCheckBox(e, item)} type="checkbox" key={item.id} style={{ width: 15, height: 15, marginRight: 5 }} />
                                    </div>
                                </div>
                            </List.Item>
                        )
                    }}
                />
            </div>
        </div>
    </div>
)

}
export default Home;

import React from 'react'
import { Checkbox } from 'antd';

interface Iprops {
checkedAll:any,
checked:boolean,
}
const Add:React.FC = (props) => {
const {checkedAll,checked } = props;
return (
全选
)
}
export default Add;