Buttons require 2 taps on mobile – first tap is to trigger hover state. Second is to trigger onClick function

I have a button in my React application. This button is working as intended on the web application, but when I open the app on my Iphone in Chrome, the button requires 2 taps to work. The first click is to trigger the hover effect, and the second is to trigger the onClick effect. I have 2 svg files – one for the hovered state and unhovered state. The svg image will render based on the isHover value. Any help is appreciated!
Here are my codes:

const OptionsButton: FC<Props> = ({ 

    disabled=false, 
    className="options-button", 
    onClick, 
    style={cursor:'pointer',height:'34',width:'34',bottom:'15', right:'15',position:'absolute' } 

}) => {

    const [isHover, setIsHover] = useState(false);

    const handleMouseEnter = () => {
        setIsHover(true);
    }
    const handleMouseLeave = () => {
        setIsHover(false);
    }
    const handleClick = (e : React.MouseEvent<HTMLButtonElement>) => {
        onClick(e);
        e.stopPropagation();
    }
    

    return (
        <>
        { 
            ( isHover )? 
            <OptionsBtnPr 
                className = {className}
                onMouseLeave={handleMouseLeave}
                onClick={handleClick}
                style={style}
            /> :
            <OptionsBtn
                className = {className}
                onMouseEnter={handleMouseEnter} 
                onClick={handleClick}
                style={style}
            />
        }
        </>
    )
}