I made this simple button with the only purpose of deleting a product, but it breaks my project whenever I import it to my admin page.
this error seems to be related to my postgres package which I use to interact with my supabase db.

All related code (I use app router):
src/components/ui/dashboard/delete-button.tsx
"use client";

import { deleteProduct } from "@/lib/actions";
import { Button } from "../button";
import { useState } from "react";

export const DeleteProduct = (props: any) => {
  const [error, setError] = useState(null);
  const id = props.id;
  async function handleDelete(e: any) {
    const result = await deleteProduct(id);
    if (!result) {
      setError(e.error);
    }
  }
  return <Button onClick={() => handleDelete} />;
};

src/lib/actions.ts

import { revalidatePath } from "next/cache";
import sql from "../../db";

export async function deleteProduct(id: any) {
  try {
    const product = await sql`
      delete from products 
      where id = ${id};
    `;
    revalidatePath("/admin");
    return product;
  } catch (e) {
    console.log("Error deleting product: ", e);
    throw e;
  }
}

I call the button in this component:
src/app/admin/page.tsx

import { DeleteProduct } from "@/components/ui/dashboard/delete-button";
import { Products } from "@/components/ui/dashboard/products";
import { getProducts } from "@/lib/actions";

export default async function Page() {
  const products = await getProducts(100);
  return (
      {products?.map((product) => (
        <>
          <Products
            title={product.title}
            imageurl={product.imageurl}
            price={1000}
          />
          <DeleteProduct id={product.id} />
        </>
      ))}
  );
}