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