<button> inside <a> is reloading the page

I have an react app with structure like this.

 private navigate(){
    alert("navigate");
}

<a href="#gotothisid">
   <button onclick="navigate()"></button>
</a>
<div id="gotothisid">
</div>

On click, the page is reloading after the alert but it should just shift the focus to #gotothisid.

What is missing here? Is there anyway to achieve both button click and a href together without reloading the page?

I want to achieve both button click and a href together without reloading the page.