React Element not responding on tap (Mobile)

So I am trying to implement this codepen into a project. I have made it so that the button basically opens a link in a new tab. Initially testing it, it worked great both on mobile and desktop, but after implementing it, still, everything works fine on desktop, but it does not respond on mobile, it responds when you use the developer option mobile view, but not on actual mobile. No matter what i do I cannot get it to respond, and I have no clue on what the problem could be. Any thoughts anyone?

The code from the codepen is the same, the only change is the button style.

*EDIT: Okay so I fixed the problem, it wasn't anything complex it was just so hard to figure out what the problem is because I couldn't actually debug to see what is happening with dev tools. So I found this official documentation for debugging from your mobile chrome browser to your pc directly.

*EDIT again: It did not fix it, it fixed it for a time but then it just came straight back, now I am completely lost.

Anyway the problem were these 2 errors:

[Intervention] Ignored attempt to cancel a touchend event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.

Unable to preventDefault inside passive event listener due to target
being treated as passive. See <URL>

/ And fixed it like this

// adding if (event.cancelable) event.preventDefault() to everything.

  handleMouseMove(event) {
    if (event.cancelable) event.preventDefault();
    const el = this.slide.current
    const r = el.getBoundingClientRect()

    el.style.setProperty('--x', event.clientX - (r.left + Math.floor(r.width / 2)))
    el.style.setProperty('--y', event.clientY - (r.top + Math.floor(r.height / 2)))
}

handleMouseLeave(event) {
    if (event.cancelable) event.preventDefault();
    this.slide.current.style.setProperty('--x', 0)
    this.slide.current.style.setProperty('--y', 0)
}

handleSlideClick(event) {
    if (event.cancelable) event.preventDefault();
    this.props.handleSlideClick(this.props.slide.index)
}

imageLoaded(event) {
    if (event.cancelable) event.preventDefault();
    event.target.style.opacity = 1
}

/ Initial problem

class Slide extends React.Component {
constructor(props) {
    super(props)

    this.handleMouseMove = this.handleMouseMove.bind(this)
    this.handleMouseLeave = this.handleMouseLeave.bind(this)
    this.handleSlideClick = this.handleSlideClick.bind(this)
    this.imageLoaded = this.imageLoaded.bind(this)
    this.slide = React.createRef()
}

handleMouseMove(event) {
    const el = this.slide.current
    const r = el.getBoundingClientRect()

    el.style.setProperty('--x', event.clientX - (r.left + Math.floor(r.width / 2)))
    el.style.setProperty('--y', event.clientY - (r.top + Math.floor(r.height / 2)))
}

handleMouseLeave(event) {
    this.slide.current.style.setProperty('--x', 0)
    this.slide.current.style.setProperty('--y', 0)
}

handleSlideClick(event) {
    this.props.handleSlideClick(this.props.slide.index)
}

imageLoaded(event) {
    event.target.style.opacity = 1
}

render() {
    const { src, link, button, headline, index } = this.props.slide
    const current = this.props.current
    let classNames = 'slide'

    if (current === index) classNames += ' slide--current'
    else if (current - 1 === index) classNames += ' slide--previous'
    else if (current + 1 === index) classNames += ' slide--next'

    return (
        <li
            ref={this.slide}
            className={classNames}
            onClick={this.handleSlideClick}
            onMouseMove={this.handleMouseMove}
            onMouseLeave={this.handleMouseLeave}
        >
            <div className="slide__image-wrapper" >
                <img
                    className="slide__image"
                    alt={headline}
                    src={src}
                    onLoad={this.imageLoaded}
                />
            </div>

            <article className="slide__content">
                <button className="slide__action reactCybr-btn">
                    <span aria-hidden class="reactCybr-btn__glitch">{button}</span>
                    <a href={link} target="_blank">{button}</a></button>
            </article>
        </li>
    )
}

}