State is not updating on axios call post Next js - reactjs

Question

i'm developing an ecommerce whit Nextjs and payments with Paypal.
This is my product component
const Product = () => {
const router = useRouter();
const { id, category } = router.query;
const [product, setProduct] = useState();
const [amount, setAmount] = useState(1);
useEffect(() => {
if (category) {
const foundProduct = products[category].find(
(element) => element.id == id
);
setProduct({ ...foundProduct, amount, total: foundProduct.price * amount });
}
}, [id, amount]);
return (
<>
{!product ? (
<Spinner />
) : (
<div className="product-wrapper">
<div className="product-image">
<Image src={product.image} />
</div>
<div className="product-info">
<h3>{product.title}</h3>
<p className="product-price">
{product.currency} {product.price}
</p>
<p className="product-description">
{product.description}
</p>
<div className="product-cart-container">
<div className="product-cart-handle">
<p onClick={() => amount > 1 && setAmount(amount - 1)}>-</p>
<span>{amount}</span>
<p onClick={() => setAmount(amount + 1)}>+</p>
</div>
<BuyButtton item={product} amount={amount} />
</div>
<div className="product-general">
<p>General information</p>
</div>
</div>
</div>
)}
</>
);
};
and this is my BuyButton component
const BuyButtton = ({ item }) => {
useEffect(() => {
console.log(item);
}, [item]);
return (
<div>
<PayPalScriptProvider
options={{
"client-id":"",
}}
>
<PayPalButtons
createOrder={async () => {
try {
const res = await axios({
url: "http://localhost:3000/api/payment",
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
data: JSON.stringify(item),
});
return res.data.id;
} catch (error) {
console.log(error);
}
}}
onApprove={(data, actions) => {
console.log(data);
actions.order.capture();
}}
style={{ layout: "horizontal", color: "blue" }}
/>
</PayPalScriptProvider>
</div>
);
};
So when i pass this props item to my BuyButton component works fine, the amount and total value updates correctly, the problem is when i do the axios call, it looks like the component stores the initial value of the item prop, so amount and value never changes, its always amount:1, value:item.value. Any ideas? Thanks
I tried storing the item prop in a state but it didin't work as i expected

Answer 1

The solution that solved my problem was adding forceReRender prop to PayPalButtons like this forceReRender={[item]}, so it re-render the button and gets the new amount value

Answer 2

In the Product component, you are passing item & amount to BuyButton
<BuyButtton item={product} amount={amount} />.
You need to add the amount to the BuyButton component as well.
const BuyButtton = ({ item, amount }) => {
and pass the amount in the request body in the axios call
data: JSON.stringify(item),
// need to add the amount data