iOS not firing the correct button in React

Question

Not sure if this is a React only problem or a general web problem, but I can't reproduce it in a "regular website".

When clicking two buttons after each other too fast in iOS it somehow fires the event of the first button clicked.

here's an example. Button 2 updates the state, button one fires an alert. If I click button 2 and then button 1 very fast after each other it will update the state twice.

Fiddle with React: https://jsfiddle.net/pugL4shm/10/

<div className="buttons">
      <button onClick={() => alert("1")}>1</button>
      <button onClick={() => setCount(count + "2")}>2</button>
      {count}
</div>

Fiddle without React: https://jsfiddle.net/m2q4xdv1/1/

<button onclick="alert('1')">
    1
</button>
<button onclick="console.log('2')">
    2
</button>

Any way to fix this?

I am using an iPhone 13 with iOS 15.2 but other devices and os has been able to reproduce it as well.

Update: Seems to be happening with the multiselect on material-ui as well when I tried it here: https://mui.com/material-ui/react-select/