How can I add the 'All' checkbox in order to select all the other options?

Question

how can I add the All checkboxes that will select all the other checkboxes for each Type of plant and adding a checkbox in front of each Type of plant section. So when I select one option Plant 1.1 then my checkbox for Type of plant #1 is filled, and if option is filled then the checkbox for Type of plant is not filled.

export default function Category({
  _id_type,
  name_type,
  plants,
  changeSelection
}) {
  const [toggleState, setToggleState] = useState(false);

  return (
    <div key={_id_type}>
      <div
        style={{
          cursor: "pointer",
          userSelect: "none",
          display: "flex",
          margin: "2px",
          backgroundColor: "lightgray"
        }}
        onClick={() => setToggleState((prev) => !prev)}
      >
        <div>{name_type}</div>
        <div
          style={{
            backgroundColor: "blue",
            color: "white",
            padding: "0px 10px",
            marginLeft: "auto"
          }}
        >
          {plants.filter(({ selected }) => selected).length}
        </div>
      </div>
      <div style={{ marginLeft: "10px" }}>
        {toggleState &&
          plants.map(({ name, _id, selected }) => (
            <div key={_id}>
              <input
                key={_id}
                type="checkbox"
                value={name}
                checked={selected}
                onChange={(e) => changeSelection(_id_type, _id, e.target.value)}
              />
              {name}
            </div>
          ))}
      </div>
    </div>
  );
}

Here a picture (what I have/ what I want) :

Here is my code

Answer 1

add new toogle inside category.jsx

{toggleState && plants.length > 1 ? (
          <div>
            <input
              type="checkbox"
              value={"all"}
              checked={allSelected}
              onChange={(e) => {
                setAllSelected((v) => {
                  changeSelection(_id_type, "all", e.target.value, !v);
                  return !v;
                });
              }}
            />
            All
          </div>
        ) : (
          ""
        )}

edit change selection function:

const changeSelection = (catId, itemId, value, allSelected) => {
    setSelectionMenu((prevSelectionMenu) =>
      prevSelectionMenu.map((item) => {
        if (item._id_type === catId) {
          return {
            ...item,
            plants: item.plants.map((plant) => {
              if (plant._id === itemId) {
                return { ...plant, selected: !plant.selected };
              } else if (itemId === "all") {
                return { ...plant, selected: allSelected };
              }
              return plant;
            })
          };
        }
        return item;
      })
    );
  };

here the forked code: https://codesandbox.io/embed/plants-forked-qdmz2h?fontsize=14&hidenavigation=1&theme=dark