React Hooks add/subtract count from click div/list

Question

The problem is that the count needs to be subtracted from the total when the item on the list has been un-selected. So far it works when the item is selected and the count goes up. Maybe some kind of toggle is needed to subtract the total from the count. And if the count is zero it needs to show and empty div with no zero or numbers. thanks in advance if anyone can help out 😀🐍🏴‍☠️

Sandbox here : https://codesandbox.io/s/checkbox-counter-friday-28-fgp85?file=/src/App.js:0-948

export const DropdownMenu = (props) => {
  const [selectedMenu, setSelectedMenu] = useState([]);

  return (
    <div className="flex justify-center relative -mr-10">
      <div className="absolute top-10 w-240 opacity-100 bg-white -ml-48 shadow-md rounded-lg text-left p-3 z-30">
        <span className="text-center inline-block w-3">
          {selectedMenu.length}
        </span>
        {props.options &&
          props.options.map((option, _idx) => (
            <div key={option.id} className={props.titleAndSubtitleGroup}>
              <div className="flex flex-row">
                <input
                  onClick={() => {
                    !selectedMenu.includes(option) &&
                      setSelectedMenu((oldValue) => [...oldValue, option]);
                  }}
                  type="checkbox"
                  id={option.group}
                  className="bg-white border-2 rounded w-4 h-4 mt-1 flex flex-shrink-0 justify-center items-center mr-2 focus-within:border-blue-0"
                />
                <label
                  htmlFor={option.groupId}
                  className={"no-underline hover:underline"}
                >
                  {option.text}{" "}
                </label>
              </div>
            </div>
          ))}
      </div>
    </div>
  );
};

export default DropdownMenu;

import React from "react";
import DropdownMenu from "./DropdownMenu";

export const App = () => {
  return (
    <DropdownMenu
      options={[
        {
          id: 1,
          text: "Post",
          icon: "",
          url: "/#",
          group: "01",
          groupId: "01"
        },
        {
          id: 2,
          text: "Delete",
          icon: "",
          url: "/#",
          group: "02",
          groupId: "02"
        },
        {
          id: 3,
          text: "Forward",
          icon: "",
          url: "/#",
          group: "03",
          groupId: "03"
        },
        {
          id: 4,
          text: "Share",
          icon: "",
          url: "/#",
          group: "04",
          groupId: "04"
        },
        {
          id: 5,
          text: "Copy Link",
          icon: "",
          url: "/#",
          group: "05",
          groupId: "05"
        }
      ]}
    />
  );
};
export default App;```