Shadcn table deleting on action.

[JacoboGanon]

I have a Shadcn able with the drop down menu and I have one called delete. I wanted for the onClick of this to call my trpc procedure but I can't use the typical useQuery for it because reactive components can only be used in react functions.

{
id: "actions",
header: () =>

Actions

,
enableHiding: false,
cell: ({ row }) => {
const employee = row.original;

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="h-8 w-8 p-0">
          <span className="sr-only">Open menu</span>
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="card-primary px-2 py-2">
        <DropdownMenuItem
          className="my-2 hover:cursor-pointer"
          onClick={() => {
            // Need help here but I want it do something like
            useMutation()
            mutation.mutateAsync()
            // If possible trigger a data refetch from the parent component to update table data.
          }}
        >
          Delete empleado
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
},

},