Como puede ver en el código de reacción, estoy tratando de reducir la cantidad, pero me cuesta hacerlo en la reacción. lo que quiero es hacer clic en el botón, entonces la cantidad debe reducirse 1 por 1. No entiendo qué debo hacer aquí.

 const ManageInventory = () => { const [products, setProducts] = useProducts(); const handleDelevery = id => { const handleDelivery = event => { event.preventDefault(); const deliveryInventoryItem = inventoryItem.quantity(quantity-1); } const handleDelete = id => { const proceed = window.confirm('Are Your Sure?'); if(proceed){ const url =`http://localhost:5000/product/${id}`; fetch(url, { method: 'DELETE' }) .then(res => res.json()) .then(data => { console.log(data); const remaining = products.filter(product => product._id !==id); setProducts(remaining); }) } } return ( <div className=''> <h2 className='product-title'>All Products {products.length} </h2> <div> </div> <div> <Table striped bordered hover variant="dark"> <thead> <tr> <th>Image</th> <th>Prodct Name</th> <th>Price</th> <th>Quantity</th> <th>Supplier</th> <th colSpan={2}>Edit</th> </tr> </thead> <tbody> { products.map(product => <tr key={product._id} product={product}> <td><img src={product.img} alt="" /> </td> <td>{product.name}</td> <td> {product.price}</td> <td>{product.quantity}</td> <td>{product.supplier}</td> <td><button className='manage-btn' onClick={()=> handleDelete(product._id)}>Delete</button></td> <td><button className='manage-btn' onClick={()=> handleDelevery()}>Delivered</button></td> </tr> ) } </tbody> </Table> </div> <button className='add-product-link'><Link to='/addproduct'>Add Product</Link></button> </div> ); };