onClick or onTouchEnd doesn’t work for iOS but works in desktop

I am creating a website for which i need to display different product card on a page with the URL being provided. I tested in desktop browser and onClick triggers properly whether internal or external link but when I am testing the page on mobile, it doesnt work at all in iOS 17 or higher. Can someone help me with this?

Below is the code for my react component:

import openExternalIcon from '../assets/images/link-external.svg'
import Button from 'react-bootstrap/Button';
export default function ProjectCard({id="dummy", project="dummy", description="dummy", image="dummy", url=""}){

    function handleClick(target){
        if(target){
            window.open(
                target,
                "_blank",
            )
        }
    }

    function handleTouch(target, event){
        event.preventDefault();
        if(target){
            window.open(
                target,
                "_blank",
            )
        }
        
    }

    return(
        <>  
            <div className='project-card d-flex flex-column position-relative desktop' id={id} onClick={()=>handleClick(url)} onTouchEnd={(e) => handleTouch(url, e)} >
                <a href={url} className="mobile" />
                <div className="p-lg-4 p-3 project-image">
                    <img src={image} alt="project images" width="100%" />
                </div>
                <div className="p-lg-4 p-3 project-details">
                    <h3 className="text-white">{project}</h3>
                    <p className="project-description">{description}</p>
                </div>
                {
                    url ? 
                        <Button 
                            type="submit"
                            className='btn-lg open-externally d-flex justify-content-center align-items-center'
                        >
                            <img src={openExternalIcon} alt="externally open link" className='align-self-center'/>
                        </Button>
                        :
                        ''
                }
            </div>      
        </>
    )
}