There is a task! It is necessary to create a new clicker by clicking on the button, which will be created with a value equal to the sum of all previous clickers (if there are clickers with a value of 3 and 5, the next one should be created with a value of 8). At the moment, I'm stuck on the problem that when creating a new clicker, the value of the previous one is stored in the volume. Tell me how to solve the problem? (Yes, and according to the condition, every fourth component should not be a clicker, but a timer)

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>
  );
}