Cannot open modal when click the button - reactjs

Question

So, when i click the cart button, the modal should be open since i passed the openModal fuction down to the cart button, but when i click on the cart button, nothing happens, please help me to find out what wrong with my codes! Thank you so much!
context.js:
class ProductProvider extends React.Component {
state = {
products: storeProducts,
detailProduct: detailProduct,
cart: [],
modalOpen: false,
modalProduct: detailProduct
};
getItem = (id) => {
const product = this.state.products.find((item) => item.id === id);
return product;
};
addToCart = (id) => {
let tempProducts = [...this.state.products];
const index = tempProducts.indexOf(this.getItem(id));
const product = tempProducts[index];
product.inCart = true;
product.count = 1;
const price = product.price;
product.total = price;
this.setState(() => {
return (
{ products: tempProducts, cart: [...this.state.cart, product] },
() => console.log(this.state)
);
});
};
openModal = (id) => {
const product = this.getItem(id);
this.setState(() => {
return { modalProduct: product, openModal: true };
});
};
closeModal = (id) => {
this.setState(() => {
return { modalOpen: false };
});
};
render() {
return (
<ProductContext.Provider
value={{
...this.state,
addToCart: this.addToCart,
openModal: this.openModal,
closeModal: this.closeModal
}}
>
{this.props.children}
</ProductContext.Provider>
);
}
}
Product.js:
class Product extends React.Component {
render() {
const { id, title, img, price, inCart } = this.props.product;
return (
<ProductWrapper clasName="col-9 mx-auto col-md-6 col-lg-3 my-3">
<div className="card">
<ProductContext.Consumer>
{(value) => (
<div className="img-container p-5">
<Link to={`/details/${id}`}>
<img src={img} alt="product" className="card-img-top" />
</Link>
<button
className="cart-btn"
onClick={() => {
value.addToCart(id);
value.openModal(id);
}}
disabled={inCart ? true : false}
>
{inCart ? (
<p className="text-capitalize mb-0">In Cart</p>
) : (
<i class="fas fa-cart-plus"></i>
)}
</button>
</div>
)}
</ProductContext.Consumer>
<div className="card-footer d-flex justify-content-between">
<p className="align-self-center mb-0">{title}</p>
<h5 className="text-blue mb-0">
<span className="mr-1">$</span>
{price}
</h5>
</div>
</div>
</ProductWrapper>
);
}
}
Modal.js:
class Modal extends React.Component {
render() {
return (
<ProductConsumer>
{(value) => {
const { modalOpen, closeModal } = value;
const { img, title, price } = value.modalProduct;
if (!modalOpen) {
return null;
} else {
return (
<ModalContainer>
<div className="container">
<div className="row">
<div
className="col-8 mx-auto col-md-6 col-lg-4 p-5 text-center text-capitalize"
id="modal"
>
<h5>item added to cart</h5>
<img src={img} className="img-fluid" alt="" />
<h5>{title}</h5>
<h5 className="text-muted">price : ${price}</h5>
<Link to="/">
<ButtonContainer
onClick={() => {
closeModal();
}}
>
Continue Shopping
</ButtonContainer>
</Link>
<Link to="/cart">
<ButtonContainer
cart
onClick={() => {
closeModal();
}}
>
Go To Cart
</ButtonContainer>
</Link>
</div>
</div>
</div>
</ModalContainer>
);
}
}}
</ProductConsumer>
);
}
}
Sanbox link for better observation: https://codesandbox.io/s/why-cant-i-fetch-data-from-a-passed-value-forked-buz0u?file=/src/App.js