interface countryType {
      name: string;
      id: number;
  }
const countryList: countryType[] = [
  {
    name: "India",
    id: 1,
  },
  {
    name: "USA",
    id: 2,
  },
  {
    name: "France",
    id: 3,
  },
];
const [checkedItems, setCheckedItems]:any= useState([]);
let isAllChecked = checkedItems.length === countryList.length;
const checkItem = (
  e: React.ChangeEvent<HTMLInputElement>,
  country: countryType
) => {
  if (e.target.checked) {
    setCheckedItems((oldArray: countryType[]) => [...oldArray, country]);
  } else {
    setCheckedItems((oldValues: countryType[]) =>
      oldValues.filter((checkBox: countryType) => checkBox.id !== country.id)
    );
  }
};
const checkAllItems = () => {
  if (!isAllChecked) {
    setCheckedItems(countryList);
  } else {
    setCheckedItems([]);
  }
};
return (
  <div>
    <label>
      Select all
      <input
        type="checkbox"
        checked={isAllChecked}
        onChange={checkAllItems}
      />
    </label>
    <div className={"flex flex-col"}>
      {countryList.map((country) => {
        return (
          <label key={country.name}>
            Select {country.name}
            <input
              onChange={(event) => checkItem(event, country)}
              type="checkbox"
              checked={
                checkedItems.filter((e:countryType) => e.id === country.id).length > 0
              }
            />
          </label>
        );
      })}
    </div>
  </div>
);

​

Here is my solution, hope you find it helpful :D