Estoy implementando un carrito de compras, que obviamente tendrá un botón para agregar más productos. Implementé el contexto del carrito y la funcionalidad funciona bien, pero cuando aumento el número de productos para comprar, no cambia el número que se muestra. ¿Cuál podría ser mi problema?

Aquí está mi código para el consumidor de contexto.

 render() { return ( <CartContext.Consumer> { (cartContext =>{ const {addProduct} = cartContext return( <div> <h1 key={this.props.product.itemId}> {this.state.product.name} </h1> <button onClick={() => {addProduct(this.props.product.itemId)}}> Add </button> <h4>{this.props.product.qty}</h4> <hr/> </div> ) }) } </CartContext.Consumer> ) }