Next.js execute onClick event before href link routing

Context

I'm using Next.js 13. And I'm using apollo client to store some client side variables.

What i'm trying to do

I'm trying to execute the onClick function prior to navigating to the href location.

My Code

<Link
      href={`/session/${session.id}`}
      onClick={() => {            
        updateDialogVars({
          dialogOpen: ATTENDANCE_DIALOG,
        })
      }}
    >
    <div>
      stuff
    </div>
</Link>

updateDialogVars is a mutation and updates a reactive vars in apollo client.

Question

Is it possible to use Next.js Link component and execute the onClick event before routing takes place with the href? Is the only option to change Link to a div and use next router to push the route change after the onClick function executes?

This is typically achieved with a button and router hook, not an anchor tag (link).

import { useRouter } from "next/router";

const SomeComponent = () => {
 const router = useRouter();

 const onClick = async () => {
  updateDialogVars(...yourConfig);
  if(someCondition) {
   await router.push(`/session/${session.id}`);
  }
 }

 return (
  <button onClick={onClick}>Label</button>
 )
}

You can also achieve a similar result with next/link.

import { useRouter } from "next/router";
import Link from "next/link";

const SomeComponent = () => {
 const router = useRouter();

 const onClick = async (event) => {
  event.preventDefault();
  updateDialogVars(...yourConfig);
  if(someCondition) {
   await router.push(event.target.href);
  }
 }

 return (
  <Link href={`/session/${session.id}`} onClick={onClick}>Label</Link>
 )
}