Struggle in tRPC with "use server" not working

function CreatePost() {
  async function createPostAction(formData: FormData) {
    "use server";

    const name = formData.get("post-name") as string; // Get name from formData
    await api.post.create({ name: name }); // Insert into DB
    revalidatePath("/vanilla-action"); // Revalidate page to see new content
  }

  return (
    <form action={createPostAction}>
      <input
        type="text"
        name="post-name"
        required
      />
      <button
        type="submit"
      >
        Submit
      </button>
    </form>
  );
}

./src/app/page.tsx:90:20
Type error: This expression is not callable.
  Type '{ mutate: Resolver<BuildProcedure<"mutation", { _config: RootConfig<{ ctx: { headers: Headers; db: PrismaClient<PrismaClientOptions, never, DefaultArgs>; session: Session | null; }; meta: object; errorShape: { ...; }; transformer: typeof SuperJSON; }>; ... 5 more ...; _output_out: unique symbol; }, { ...; }>>; }' has no call signatures.

  88 |
  89 |     const name = formData.get("post-name") as string; // Get name from formData
> 90 |     await api.post.create({ name: name }); // Insert into DB

export const api = createTRPCProxyClient<AppRouter>({
  transformer, ... 

export const api = appRouter.createCaller({
  db: db,
  headers: headers(),
});