useSelectRows is a hook that manage a list of selected items, so you don't have to

usage.tsx

const MyUserSelectableList = ({ users ) => {
  const { onRowCheck, isRowSelected } = useSelectedRows();

  return (
    <>
     {users.map(user => (
        <>
          <Checkbox value={isRowSelected(user)} onChange={(value) => onRowCheck(user, value)} />
          <span>{user.name}</span>  
        </>
     )}
    </>
  );
}

useSelectedRows.tsx

import { useState } from 'react';

type Node = {
  id: string;
};
export const useSelectedRows = () => {
  const [selectedRows, setSelectedRows] = useState<Node[]>([]);

  const onRowCheck = (node: Node, checkedState: boolean) => {
    if (checkedState) {
      const rowIndex = selectedRows.findIndex(({ id }) => node.id === id);

      if (rowIndex === -1) {
        return;
      }

      setSelectedRows([...selectedRows.slice(0, rowIndex), ...selectedRows.slice(rowIndex + 1)]);
      return;
    }

    setSelectedRows([...selectedRows, node]);
  };

  const isRowSelected = ({ id }: Node) => selectedRows.findIndex(node => node.id === id) > -1;

  const onRowCheckAll = (selectedRows: Node[]) => setSelectedRows(selectedRows);

  return {
    onRowCheck,
    isRowSelected,
    selectedRows,
    onRowCheckAll,
  };
};