How to prevent react router Link from rounting only when I click on one of the nested div inside of it?

Question

I have an item card component mapped for no. of items. This component is wrapped with the router Link to take me to the item's page when clicked anywhere on it. Inside this component along with other divs, there is one button with its own event handler to do something. I don't want the router to link me anywhere only if I click this button.

A simplified example, my mapped component:

<>
   {list.map((item) => {
       return <Link to={`/item/${item.id}`>
          <ItemCard key={item.id} name={item.name} price={item.price} addToCart={addToCart} />
    </Link>
   })}
</>

My simple code inside the component:

    const {name, price, addToCart} = props;
return    <div>
          <h2>{name}</h2>
          <h4>{price}</h4>
          <button onClick={(e) => addToCart(e)} type="button">Do Something</button>
        </div>

I want it so that when I click on the button, which is inside the Link, the Link shouldn't redirect me and only the button's event gets handled. I tried adding e.stopPropagation() inside the button's handler but its own task stopped working, Routing stayed functional.