Stop button losing focus when contextmenu event fires

I've got a react application that has a need for a piece of content to play when a button is held down and then stop when the button is released.

I've implemented this by creating a helper to handle detecting a longpress, when onMouseDown or onTouchStart is fired then it plays, when onMouseUp, onMouseLeave or onTouchEnd fires it stops. This all works perfectly on desktop. The issues comes when we take a look at mobile, mobile treats a long press as a right click in the desktop and tries to launch a contextmenu or highlight an element/piece of text, to deal with this I've added the following css:

touch-action: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;

and the following Javascript:

window.oncontextmenu = function (event) {
  event.preventDefault();
  event.stopPropagation();
  return false;
};

This works as expected in the sense that the contextmenu doesn't display, however the button that is being held does lose focus, meaning that the content continues to play and the onMouseUp, onMouseLeave or onTouchEnd events never fire unless you tap somewhere on the button or screen again, I've tried solutions like reapplying the focus to the button during the onContextMenu event however that doesn't work either.

from Stop button losing focus when contextmenu event fires