In my React app , I have a div with onClick event for collapsing sidebar, it is working fine, but on touch screens it is triggering event for only double tap , How can I disable that functionality ?

When I touch once on div , first it is setting isActive state true and right after that false

<div onClick={(e) => handleSideBar} className='dashboard-arrow-dark dashboard-arrow d-flex align-items-center justify-content-center'>
    {isActive ? <ArrowRightIcon /> : <ArrowLeftIcon/>}
</div>

  // collapse side bar
  const handleSideBar = (e) => {
    e.preventDefault()
    setIsActive(!isActive)
  }