How can I prevent href from firing using React onClick?

trying to make a link element (<a> element) with href. Why am I using href and not changing history? because I want the option to open in a new tab in browser.

The Problem is, I have a button inside the element, and when you click on it, it triggers the href immediately, before even getting to stopProppagation or preventDefault inside the onClick handler of the button. It’s like 2 different event types…

something like this:

...
const onButtonClick = (event) => {
    event.stopPropagation();
    event.nativeEvent.stopImmediatePropagation();
    event.preventDefault();
    if (clickDisabled) return;
    if (!onClick) return;
    onClick(event);
}

return (
    <a href={someHref}>
        <button onClick={onButtonClick}>open menu</button>
    </a>
)

Any ideas?