NuxUI DropdownMenu link not navigating page

const items = [
  [
    {
      label: "Niklaus Mutseyekwa",
      type: "label",
    },
  ],
  [
    {
      label: "Profile",
      icon: "i-mdi-user",
      to: "/dashboard/profile",
      // component: "NuxtLink",
      // onSelect: () => (open.value = false),
    },
    {
      label: "Settings",
      icon: "i-mdi-cog-outline",
      to: "/dashboard/settings",
      // component: "NuxtLink",
    },
  ],
  [
    {
      label: "Logout",
      icon: "i-mdi-logout",
      color: "error",
      onSelect: handleSignOut,
    },
  ],
];

<script setup>
import { authClient } from "~/lib/auth-client";
const session = authClient.useSession();

const toast = useToast();
const isLoading = ref(true);

async function handleSignOut() {
  try {
    await authClient.signOut({
      callbackURL: "/auth/sign-in",
    }); 
  } catch (error) {
    console.log("Sign out failed", error);
  }
}
</script>

<template>
  <div >
    <h1>Profile</h1>

    <!-- Signed In State -->
    
      <UCard title="Session Data" v-if="session.data">
        <pre class="text-sm overflow-auto">{{ JSON.stringify(session.data, null, 2) }}</pre>
      </UCard>

      <UCard title="User Info" v-if="authStore.user">
            <p class="text-sm text-gray-500">Name</p>
            <p class="text-xl font-bold">{{ session.data.user.name }}</p>
          
          <UButton
            variant="outline"
            color="red"
            @click="handleSignOut"
         
          >
            Sign out
          </UButton>
        
      </UCard>


    <!-- Not Signed In State -->
    <UCard v-else-if="!isLoading">
      <div >
        <p class="text-lg">You are not signed in</p>
        <UButton to="/auth/sign-in">Sign In</UButton>
      </div>
    </UCard>
  </div>
</template>