css – Button within react-router Link?

Say I have an element with the following structure:

<Link to={`/games/${game.id}`}>
  <GameInfo/>
  <CustomButton/>
</Link>

enter image description here

Is it possible for the button inside the link to behave independently from the link beneath without using the z-index css property? I’d like to do this while keeping the current behaviour in which hovering the button triggers both the hover effect for the button and for the link below.

Right now, if I click on the Add to Library button, the game gets added to the library but the Link below also gets triggered and the game profile page is open, which is not intended.

The only solution I can think of so far is something like this:

  <div> // <= move link hover effects here
    <Link to={`/games/${game.id}`}>
      <GameInfo/>
    </Link>

    <CustomButton/>
  </div>

But it’s not ideal, because I would still like the area around the button to be part of the Link (so hover and the link itself work in the areas shown below).

enter image description here

Is z-index the only solution?