Tengo un div que está envuelto en una etiqueta de enlace en NextJS. Dentro del div tengo una fila de componentes que son botones. Cuando hago clic en uno de estos botones, hacen lo que deben hacer, pero la etiqueta de enlace también se activa desde el div principal y navegamos a otra página. He agregado e.stopPropagation() a los controladores de eventos de los botones, pero no hace ninguna diferencia. ¿Alguien puede ver lo que estoy haciendo mal, por favor?

El componente principal:

 <Link href={{ pathname: `/...`, query: { var:var }, }}> <div> ... <div className="flex flex-row"> <Button1/> <Button2/> </div> </div> </Link>

Un componente de botón secundario:

 async function handleClick(e) { e.stopPropagation() ... } <button onClick={handleClick}> ... </button>

También intenté agregar stopPropagation al onClick como tal:

 <button onClick={(e) => e.stopPropagation(), handleClick}> ... </button>

¿Por qué el clic sigue subiendo al enlace principal, por favor?