Apply increment/decrement count on adding/removing divs with React Hooks

Question

I'm trying to add and remove a count every time the div is clicked and either added or removed from the list, So far I have been able to add the increment count when the div is clicked but it still adds the count even when the name has already been clicked and added to the list. I have placed the incrementCount() in the incorrect place and also I have not been able to work out where to add the decrementCount() to. This should be easy for most people. and many thanks in advance if you could help out or point me in the right direction 😀 the Link to sandbox is here ➡️ https://codesandbox.io/s/optimistic-hamilton-len0q?file=/src/Home.js:244-258

import { useEffect, useState } from "react";

export const List = (props) => {
  const [selectedNames, setSelectedNames] = useState([]);
  const [names, setNames] = useState([]);
  const [count, setCount] = useState(0);

  const decrementCount = () => {
    if (count > 0) setCount(count - 1);
  };

  const incrementCount = () => {
    setCount(count + 1);
  };

  useEffect(() => {
    props.title === "" && setNames(props.items);
  }, [setNames, props]);
  return (
    <div className="">
      <div className="">
        ⬇ Click on the names below to add them to the list
        {names &&
          names.map((item, index) => (
            <div
              key={`${props}-${index}`}
              onClick={() => {
                incrementCount();
                !selectedNames.includes(item) &&
                  setSelectedNames((oldValue) => [...oldValue, item]);
              }}
            >
              <div className="list-name">{item.name}</div>
            </div>
          ))}
      </div>
      <div className="count-box">
        {count}
        <span>selected</span>
      </div>
      <div
        className="unselect-all-box"
        onClick={() => {
          setSelectedNames([]);
          setCount(0);
        }}
      >
        Unselect all
      </div>
      {selectedNames &&
        selectedNames.map((format) => (
          <div key={format.id}>
            <div className="">{format.name}</div>
            <div
              className="remove-selected"
              onClick={() => {
                setSelectedNames(
                  selectedNames.filter((f) => f.name !== format.name)
                );
              }}
            >
              (Press HERE to remove name)
            </div>
          </div>
        ))}
    </div>
  );
};
export default List;

export const App = (props) => {
  const formats = [
    {
      id: "0001",
      name: "(1) Sam Smitty",
    },
    {
      id: "0002",
      name: "(2) Hong Mong",
    },
  ];

  return (
    <div>
      <List title="" items={formats} />
    </div>
  );
};

export default App;```

Answer 1

Increment the count only if the item is not in the array

onClick={() => {
                if(!selectedNames.includes(item)){
                  incrementCount();
                  setSelectedNames((oldValue) => [...oldValue, item]);
                }
              }}