How to prevent click propagation when we have a parent anchor limk which has a button as one of children

When I click on the Link parent it fires the click on the button as well, I want both events to be separated.

<Link className="product-item__link" to={`/products/${product.category}/${product.id}`} >
    <div className='product-item'>
        {/*I have here other elements*/}
        <button className="product-item__btn" onClick={() => addToCart(product)}>Add to cart</button>
     </div>
</Link>

Add stop propagation in the function call of button click

<Link className="product-item__link" to={`/products/${product.category}/${product.id}`} >
    <div className='product-item'>
        {/*I have here other elements*/}
        <button className="product-item__btn" onClick={(e) => addToCart(e, product)}>Add to cart</button>
     </div>
</Link>

change function definition

const addToCart = (e, product) => {
      e.stopPropagation();
      e.preventDefault();
      //rest of the code...
}