Why is my CTA taking one click or two clicks at certain times on Safari to redirect the user to the correct page?

Why is my CTA taking one click or two clicks at certain times on Safari to redirect the user to the correct page? On chrome there are no issues with the CTA, it’s only on Safari.

I have already tried:

• Adding cursor: pointer; to the element.
• Adding an onTap and onTapStart event handler identical to the onClick..
• Removing the assigned CSS styling.

Any help would be greatly appreciated.

Main parts of the code

import React from 'react';

const CTAbuttonMain = (props) => {
    return (
        <button type={props.type || 'button'} className={`coloured-btn ${props.className}`} onClick={props.onClick} disabled={props.disabled}>
            {props.children}
        </button>
    );
};

export default CTAbuttonMain;`

---

<CTAbuttonMain className={classnames('outline-dark', { 'btn cta-mini': !isTablet })} onClick={AuthHelper.login}>
    Log in
</CTAbuttonMain>

---

    const handleLogin = () => {
        AuthHelper.login();
    };