I want to fire stop propagation method on event object that is inside a Link component from React-Router-Dom. My problem is that when I click on the button that is inside the Link element it moves me anyway to another page. I see that the stopPropagation method is not working properly and the onClick event on the Link element is firing up. How to prevent this behavior?

I have prepared an example on codeSandbox but in this example, Link is not moving me to another page but only refreshing the page.

Example
https://codesandbox.io/s/serene-surf-h65dz?file=/src/Home.js

My Code:

const handleClick = e => {

  e.stopPropagation();

  return console.log("Works?");

};



return (

  <Link to={`/edytuj/${item.ID}`} className="table__row">

    <Checkbox

      isSelected={isSelected}

      toggleSelection={() => handleSelection(item, isSelected)}

    ></Checkbox>

    <TableRowItem>{item.ID}</TableRowItem>

    <TableRowItem

      src={item.IMAGE}

      additionalClassName="table__image"

    ></TableRowItem>

    <TableRowItem>{item.NAME}</TableRowItem>

    <TableRowItem>{item.DESCRIPTION}</TableRowItem>

    <TableRowItem additionalClassName="table__cost">

      {item.COST} zł

    </TableRowItem>

    <TableRowItem additionalClassName="table__buttons">

      <Button className="btn btn__edit" icon="fas fa-pen btn__icon">

        Edytuj

      </Button>

      <Button

        onClick={e => handleClick(e)}

        className="btn btn__delete"

        icon="fas fa-times btn__icon"

      >

        Usuń

      </Button>

    </TableRowItem>

  </Link>

);

Button:

const Button = ({ className, icon, children, onClick }) => {

  return (

    <button onClick={onClick} className={className}>

      {children}

      {icon && <i className={icon}></i>}

    </button>

  );

};