navigate() function refresh the page when called inside an async function

[rimzzlabs]

Hello, Im currently using react-router-dom@^6.4.2.

I'm building a minimal app that is work like a file explorer.
where a folder should navigate to its url when double clicked for example.

But the thing is, I want to get the detail about the folder itself when double clicked before the app navigate to it's url
here's the code

type FolderProps = { url: string; id: string; name: string }

export default function Folder(props: FolderProps){
 const navigate = useNavigate()
 
 const onDblClick = async <T>(e: React.MouseEvent<T>) => {
  e.stopPropagation()
  const res = await fetch("https://api/get/detail/" + props.id)
  const data = await res.json()

  const pathname = `/document/${data.urls}`
 
  navigate(pathname, { state: data })
 }

 return (
  <div onDoubleClick={onDblClick}>
   <span>{ props.name }</span>
  </div>
 )
}

everyting works fine, the app navigate to the url, but the page got refreshed, why is that?
looking forward for the answer about this one, thank you