React: how to have a Link with buttons inside, but make buttons not fire the link onclick

Question

I have this code:

const history = useNavigate();

const navigate = (e) => {
    e.preventDefault();
    history('/link')
}

const doSomething = (e) => {
    e.stopPropagation();
    someFunc();
}

return (
    <a href="/link" onClick={navigate}>
        <span>Some stuff</span>
        <button onClick={doSomething}></button>
    </a>
);

This doesn't work because the preventDefault does not work because of the stopPropagation(). Of course I could use a div to avoid the link, or just remove the href all together but I'm striving for quality code, so what's the best option? I also can't use a button instead of a because there would be a button inside a button.