React: How to prevent a button (wrapped in <Link> imported from react-scroll) from scrolling, when clicked

Question

am using react-scroll to get the smooth scroll effect after clicking on a component.

The problem is, when I added a button inside the component, to be able to make a favorite list, that after clicking on this button, the smooth scroll effect also occurs (which is understandable).

My question is, how can I prevent this behavior?

Short mockup:

import React from "react";
import { Link } from "react-scroll";

import iconSprites from "../images/sprite.svg";

const App = () => {
    const handleClickFavorite = () => {
        console.log("favorite clicked!");
    };

    return (
        <Link
            activeClass="active"
            to="test-destination"
            smooth={true}
            spy={true}
            duration={500}
            className="App-Link"
        >
            <div className="App-item">
                <img
                    className="App-item__img"
                    src={exampleSRC}
                    alt="img"
                />

                <div className="App-item__text">
                    <p>Lorem ipsum</p>
                </div>

                <button
                    onClick={handleClickFavorite}
                    className="App-item__btn--favorite"
                >
                    <svg className="App-item__icon--favorite">
                        <use href={iconSprites + "#icon-star"} />
                    </svg>
                </button>
            </div>
        </Link>
    );
};

export default App;

I have tried in css with overflow: hidden; in .App-item__btn--favorite but it did not work and was also hiding my icon (which I also understand - it is hiding the children of the button).

Any ideas are welcome.

---

EDIT: As suggested below, I made the button as a sibling to the rest, but inside of the App-item so that I could better position id. I added an additional after and now it is working. Below the solution:

return (
<div className="App-item">
        <Link
            activeClass="active"
            to="test-destination"
            smooth={true}
            spy={true}
            duration={500}
            className="App-Link"
        >
            <div className="App-item__container">
                <img
                    className="App-item__img"
                    src={exampleSRC}
                    alt="img"
                />

                <div className="App-item__text">
                    <p>Lorem ipsum</p>
                </div>
            </div>
          </Link>
                <button
                    onClick={handleClickFavorite}
                    className="App-item__btn--favorite"
                >
                    <svg className="App-item__icon--favorite">
                        <use href={iconSprites + "#icon-star"} />
                    </svg>
                </button>
           </div>
    );
};

Answer 1

Since the button is a child element of the element wrapped with the Link component, the Link functionality extends to it.

Off the top of my head two solutions to this would be:

1. Make the div and the button elements siblings, position them over each other with css. That way you could wrap the div in a Link component without also wrapping the button.

2. Use an onClick handler on the button and preventDefault() to stop the inherited functionality from the div from happening (not sure this one works, would have to play around with it a bit to see if it actually does the job).