I have these functions that I declared in the parent component and I am using this:

 {data ? (
                      <CartComponent
                        cart={cart}
                        addQuantity={addQuantity}
                        reduceQuantity={reduceQuantity}
                        removeFromCart={removeFromCart}
                        waterTypes={waterTypes}
                        addToCart={addToCart}
                      />
                    ) : (
                      <p>No data</p>
                    )}

And the cart component: I can see the data but I cannot click on the buttons

interface CartComponentProps {
  //rest of the codes
  addQuantity: (itemId: string) => void;
  reduceQuantity: (itemId: string) => void;
  removeFromCart: (itemId: string) => void;
  addToCart: (waterType: WaterType) => void;
}

const CartComponent: React.FC<CartComponentProps> = ({
  cart,
  addQuantity,
  reduceQuantity,
  removeFromCart,
  addToCart,
}) => {
  return (
    <div>
      <h1>Water Available:</h1>
      {data.map((dataItem) => (
        <div key={dataItem.id}>
          <button onClick={() => addToCart(dataItem)}>Add to Cart</button>
        </div>
      ))}
      <h2>Your Cart</h2>
      <ul>
        {cart.map((item) => (
          <li key={item.id}>
            <p>{item.name} - ${item.price} </p>
            <p>Liter: {item.quantity}</p>
            <p>Unit price: {item.quantity * item.price}</p>
            <button onClick={() => addQuantity(item.id)}>+ Add more Liter(s)</button>
            <button onClick={() => reduceQuantity(item.id)}>- Reduce Liter(s)</button>
            <br />
            <button onClick={() => removeFromCart(item.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default CartComponent;

Also in: https://stackoverflow.com/questions/77701758/nextjs-onclick-event-is-not-triggered-when-it-is-in-a-child-component