React button not firing onTouchEnd - ios

Question

I am using React button with child components that change based on the state like, is button pressed, touched etc. I have defined custom event handlers that change the states, isPressed, isTouched etc.
Issue: On iPhone , the onTouchEnd is not firing. With, iOS voiceover turned ON the issue is more prominent because mouse events are not fired. So the user has to tap-tap twice to actually click succeed.
Here are the events -->
const onMouseDown = function(){
setPressed(true);
};
const onMouseUp = function(){
handleClick();
}
const onTouchStart = function(){
setTouched(true);
setHover(false);
setPressed(true);
};
const onKeyDown = function(keyboardEvent: any){
if (keyboardEvent.key === "Enter") {
handleClick();
};
};
const onTouchMove = function(e: any){
e.preventDefault();
};
const onTouchEnd = function(e: any) {
e.preventDefault();
setTouched(false);
setHover(false);
if (!clicked) {
handleClick();
}
};
const onFocus = function () {
if (!touched) {
setHover(true);
}
};
const onKeyUp = function(keyboardEvent: any) {
if (keyboardEvent.key === "Enter") {
handleClick();
}
};
const onBlur = function() {
setHover(false);
setPressed(false);
};
const onMouseOver = function () {
if (!touched) {
setHover(true);
}
};
const onMouseOut = function () {
setHover(false);
setPressed(false);
}
This is the button content -
<button
style={buttonStyle}
onMouseDown={onMouseDownf}
onMouseUp={onMouseUp}
onKeyDown={onKeyDown}
onKeyUp={onKeyUp}
onMouseOver={onMouseOver}
onFocus={onFocus}
onMouseOut={onMouseOut}
onBlur={onBlur}
onTouchStart={onTouchStart}
onTouchCancel={onTouchCancel}
onTouchMove={onTouchMove}
onTouchEnd={onTouchEnd}
onClick={() => { console.log("onClick") }}
disabled={props.disabled}
>
{
pressed ? <Spinner styles={newSpinnerStyle} size={SpinnerSize.large} /> : normalButtonContent
}
</button>
</>
If I remove the dynamic content it works fine, i.e. -->
{ pressed ? <Spinner styles={newSpinnerStyle} size={SpinnerSize.large} /> : normalButtonContent }
to
{ normalButtonContent }

Answer 1

Looks like when the child component changes, the button (i.e. the parent) is re-rendered. And so the onTouchEnd is not fired. Probably a race condition between the re-render and onTouchEnd call.
Moving the dynamic component i.e. spinner / normalButtonContent outside of the button helped workaround this issue.