I have been trying to fix this for hours. I found this issue originally on iOS for a website I had released. I have tested with the following code, and it will work 90% of the time, but randomly will not work.
<button className="p-8" onClick={() => (console.log("successful click"))}>test</button>
I use tailwindcss, but have tried adding the cursor: "pointer" style to the button and parent divs, which changed nothing, I have tried adding an id with a separate javascript addEventHandler, which changed nothing, I have tried adding onClick="void(0)" to both parent and child divs, which did nothing, I tried calling onTouchStart alongside onClick, which somewhat solved this issue but cause another issue where things were being double-clicked. I have tried EVERYTHING that I could find on the internet and nothing is working.
I figured it out. Upon inspecting the page, I saw that several of my buttons were flashing on the 'elements' panel. I had a separate function being called once per second that was updating the state of a number (I have a countdown timer on my page) that was completely unrelated to this button.
Updating the state of that item was causing every button to re-render every second, which takes milliseconds, but if you happened to click right when it rendered it would do nothing. Removing the logic of the timer setState() actually solved all of my problems with the clicking.