выбрать все Checkbox нажатием на верхнюю ячейку

Код в трех файлах. В setList() нужно передать массив выделяемых объектов, но они генерируются с помощью map. Как правильно поступить ? в целом я пытаюсь адаптировать свой код под этот https://codesandbox.io/s/react-select-all-checkbox-jbub2 . Но там массив для Checkbox вынесен в отдельный файл, а у меня генерируется с помощью map https://codesandbox.io/s/sweet-butterfly-0s4ff?file=/src/TableBody/TableBody.jsx

1)

  let Checkbox = () => {
      
        return (
            <div>
                <label className={s.checkbox}>
                    <input className={s.checkbox__input} type="checkbox"/>
                        <span className={s.checkbox__fake}></span>
                </label>
            </div>
        )
    }

2.



 const Tablehead = (handleSelectAll, isCheckAll ) => {
        return (
            <thead className = {s.header}>
            <tr className = {s.area}>
              <th ><Checkbox name="selectAll" id="selectAll" handleClick={handleSelectAll}  isChecked={isCheckAll}/></th>
             
            </tr>   
          </thead>
        )
    }

3. const TableBody = ({droplets}) => {

     const [isCheckAll, setIsCheckAll] = useState(false);
     const [isCheck, setIsCheck] = useState([]);
     const [list, setList] = useState([]);
   
     useEffect(() => {
       setList();
     }, [list]);
   
     const handleSelectAll = e => {
       setIsCheckAll(!isCheckAll);
       setIsCheck(list.map(li => li.id));
       if (isCheckAll) {
         setIsCheck([]);
       }
     };
   
     const handleClick = e => {
       const { id, checked } = e.target;
       setIsCheck([...isCheck, id]);
       if (!checked) {
         setIsCheck(isCheck.filter(item => item !== id));
       }
     };
   
     return (
         <>
             {droplets.map((droplet, index, id, name ) =>
   
                 <tr className={s.area} key={index}   >
                     <td ><Checkbox  key={id} name={name}  handleClick={handleClick}   isChecked={isCheck.includes(id)}/></td>
                     <td><button type="submit" className={s.button}><Edit /></button></td>
                     <td><button type="submit" className={s.button}><Trash /></button></td>
                 </tr>
             )
             }
         </>
     )
   

   }