¡Hay una tarea! Es necesario crear un nuevo clicker haciendo clic en el botón, que se creará con un valor igual a la suma de todos los clickers anteriores (si hay clickers con un valor de 3 y 5, se debe crear el siguiente con un valor de 8). Por el momento, estoy atascado con el problema de que al crear un nuevo clicker, el valor del anterior se almacena en el volumen. ¿Dime cómo resolver el problema? (Sí, y según la condición, uno de cada cuatro componentes no debe ser un clicker, sino un temporizador)

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