select all Checkboxes by clicking on the top cell

Сode in three files. In setList () you need to pass an array of objects to allocate, but they are generated using map. What is the right thing to do? in general I am trying to adapt my code to this https://codesandbox.io/s/react-select-all-checkbox-jbub2 But there the array for the Checkbox is moved to a separate file, and mine is generated using map.

1-file)

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

2-file)

 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-file)

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>
                )
                }
            </>
        )
    }