trabajando en una aplicación de carrito en un curso de udemy: el problema es que cuando se compra la cantidad, se supone que deshabilita el botón pero no funciona, solo muestra el botón Agregar al carrito sin deshabilitarlo cuando la cantidad es cero. estar actualizando

 import { Button } from 'react-bootstrap'; import { Card } from 'react-bootstrap'; import { Link } from 'react-router-dom'; import React, { useContext } from 'react'; import Rating from './Rating'; import axios from 'axios'; import { Store } from '../Store'; function Product(props){ const {product} = props; const {state , dispatch:ctxDispatch} = useContext(Store); const {cart: {cartItems}} = state const addToCartHandler = async (item )=>{ const existItem = cartItems.find((x)=> x._id === product._id); const quantity = existItem ? existItem.quantity+1:1 ; const {data} = await axios.get(`/api/products/${item._id}`); if(data.countInStock < quantity){ window.alert('sorry product is out of stock') return; } ctxDispatch({ type:'CART_ADD_ITEM' , payload:{...item , quantity}, }); }; return( <Card> <Link to={`/product/${product.slug}`}> <img src={product.image} className="card-img-top" alt={product.name} /> </Link> <Card.Body> <Link to={`/product/${product.slug}`}> <Card.Title>{product.name}</Card.Title> </Link> <Rating rating={product.rating} numReviews={product.numReviews} /> <Card.Text>${product.price}</Card.Text> { product.countInStock === 0 ? ( <Button color="light" disabled={true} > Out of stock</Button> ):( <Button onClick={() => addToCartHandler(product)}>Add to cart</Button> )} </Card.Body> </Card> )}

no muestra el botón agotado cuando se usa la cantidad, ¿qué pasa con el código? código completo: https://github.com/basir/mern-amazona/commit/12e565bf6e1859b963729eaba46a5352962fe9e1

código completo con backend: https://github.com/basir/mern-amazona/tree/12e565bf6e1859b963729eaba46a5352962fe9e1