use-checkbox.tsx

import { useState, useEffect } from "react";

type Checks = Map<string, boolean>;

const createFromMap = (list: Input[]): Checks => new Map(list.map((x) => [x.name!, x.checked!]));

const getOnlyChecked = (map: Checks) => {
  const values: string[] = [];
  map.forEach((checked, key) => (checked ? values.push(key) : undefined));
  return values;
};

export const useCheckbox = (list: Input[]) => {
  const [map, setMap] = useState(() => createFromMap(list));
  const [values, setValues] = useState<string[]>([]);

  useEffect(() => setMap(createFromMap(list)), [list]);

  useEffect(() => setValues(getOnlyChecked(map)), [map]);

  const onChange: Input["onChange"] = (e) => {
    const { name, checked } = e.target;
    map.set(name, checked);
    setMap(new Map(map));
  };

  const get = (item: string) => {
    const findItem = list.find((x) => x.name === item);
    if (findItem) {
      return {
        ...findItem,
        onChange,
        value: findItem.name,
        children: undefined,
        checked: !!map.get(item),
      };
    }
  };
  return { map, values, onChange, get };
};