using hooks in columndef

{
    id: "actions",
    cell: ({ row }) => {
      const productId = row.original.id
      const queryClient = useQueryClient() // can't use a hook in here

      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="w-8 h-8 p-0">
              <span className="sr-only">Open menu</span>
              <MoreHorizontal className="w-4 h-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <Link 
              to={`/products/${productId}`}
              state={row.original}
            >
              <DropdownMenuItem>
              Edit
              </DropdownMenuItem>
            </Link>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              className="text-destructive"
              onClick={() => axios.delete(
                "http://localhost:3001/api/products/delete",
                {data: {id: productId}}
              ).then(res => {
                if (res.status === 200) {
                  toast("deleted")
                  queryClient.invalidateQueries('products')
                }
              })}
            >Delete</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
  },