{LeadTabItems.map((item) => (
<li
key={item.id}
className={cn(
"py-1 border-b-[3px]",
getActiveState(item.href) ?? item.id === 1
? "border-b-zinc-900"
: "border-b-transparent"
)}
>
<Link
href={item.href}
onClick={() => console.log(item.href)}
className={buttonVariants("ghost", "capitalize")}
>
<item.icon className="w-4 h-4 me-1" /> {item.name}
</Link>
</li>
))}

I sometime required to click the link twice to get result

export const TableModel = async ({
filters,
}: {
filters?: { [key: string]: string };
}) => {
const { leads, totalLeads } = await fetchLeads({
...filters,
});
return <Table leads={leads} totalLeads={totalLeads} />;
};

this Table is client component.