im trying to update a profile in my app and wanted to use server actions for that, its a server component with no client components inside but im getting the following error
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

here is the code

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { revalidatePath } from "next/cache";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";

async function EditProfile() {
  const supabase = createServerComponentClient({ cookies });

  const {
    data: { session },
  } = await supabase.auth.getSession();

  if (!session) {
    redirect("/auth/login");
  }

  const { data: profile, error } = await supabase
    .from("profiles")
    .select("*")
    .match({ id: session.user.id })
    .single();

  if (session.user.id !== profile.id) {
    redirect("/");
  }

  if (error) {
    throw new Error(error.message);
  }

  const updateProfile = async (formData) => {
    "use server";

    // // get content from input
    const username = formData.get("username");
    console.log(username);
    await supabase
      .from("profiles")
      .update({ username })
      .match({ id: profile.id });

    // fetch fresh data from supabase
    revalidatePath(`/profile/${username}`);
  };

  return (
    <div className="grid grid-rows-1 items-center justify-center">
      <form action={updateProfile} className="flex flex-col gap-5">
        <input type="text" name="username" defaultValue={profile.username} />
      </form>
    </div>
  );
}

export default EditProfile;

i tried to remove the part where im updating the database inside the server action and function was working, but when returning them i get the error