How to Stop Click Event Bubbling With e.stopPropagation() in React

Question

I have a div which is wrapped in a Link tag in NextJS. Within the div I have a row of components which are buttons. When I click one of these buttons, they do what they should do, but the Link tag also gets fired from the parent div and we navigate to another page. I have added e.stopPropagation() to the event handlers of the buttons, but it's not making any difference. Can anyone see what I'm doing wrong, please?

The parent component:

<Link href={{
    pathname: `/...`,
    query: { 
        var:var 
    },
}}>
    <div>
    ...
        <div className="flex flex-row">
            <Button1/>
            <Button2/>
        </div>
    </div>    
</Link>

A child button component:

async function handleClick(e) {
    e.stopPropagation()
    ...
}

<button onClick={handleClick}>
...
</button>

I have also tried adding adding the stopPropagation to the onClick as such:

<button onClick={(e) => e.stopPropagation(), handleClick}>
...
</button>

Why is the click still bubbling up to the parent Link, please?

Answer 1

here is the culprit:

<button onClick={(e) => e.stopPropagation(), handleClick}>

try:

<button onClick={(e) => { e.stopPropagation(); handleClick(); }

live demo on these two different versions: https://codepen.io/remyho427/pen/NWamxvG