Как очистить State?

Есть задание! Нужно по клику на кпопку создавать новый кликер, который будет создаваться со значением равным сумме всех предыдущих кликеров(если есть кликеры со значением 3 и 5 следующий должен создасться со значением 8). В данный момент я застрял на проблеме, что при создании нового кликера в тoм сохраняется значение предыдущего. Подскажите как решить задачу? ( Да и еще по условие каждый четвертый компонент должен быть не кликером, а таймером)

function App() {
  const [click, setClick] = useState([]);

  function addClicker() {
    setClick([...click, <Counter />]);
  }

  function del() {
    setClick([...click.slice(0, click.length - 1)]);
  }

  return (
    <div className='app'>
      <AddDelButton />
      <button className='btn'  onClick={addClicker}>addClicker</button>
      <button className='btn' onClick={del}>delClicker</button>
      {click.map((item, i) =>
        !((i + 1) % 4) ? <NoClicker key={i} /> : <Counter props={click} key={i} />
      )}
    </div>
  );
}

///////////////

function Counter(props) {
  const State = useSelector((state) => state.ourState.count);
  const dispatch = useDispatch();
  console.log('====>>>', State);


  return (
    <div className='counter'>
      <button className='btnClick'
        onClick={() => dispatch(incrementValue())}
      >
        Increment
      </button>
      <h2>{State}</h2>
      <button className='btnClick'
        onClick={() => dispatch(decrementValue())}
      >
        Decrement
      </button>
      <button>Delete</button>
    </div>
  );
}