I followed the new next14 course and have a question about chapter 12 mutating data: https://nextjs.org/learn/dashboard-app/mutating-data . In this chapter you import a deleteInvoice function from lib/actions.ts which is marked "use server" then assign it to the delete button in a component as follows:

import { deleteInvoice } from "@/app/lib/actions";

export function DeleteInvoice({ id }: { id: string }) {
const deleteInvoiceWithId = deleteInvoice.bind(null, id);
return (
<form action={deleteInvoiceWithId}>
'......

This works, but I tried to better understand it and never used .bind so tried to do it a different way:

import { deleteInvoice } from "@/app/lib/actions";

export function DeleteInvoice({ id }: { id: string }) {
const deleteInvoiceWithId = () => { return deleteInvoice(id); };
return (
<form action={deleteInvoiceWithId}>
'......

However this gets me the error: Unhandled Runtime Error

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". <form action={function} children=...> ^^^^^^^^^^

could someone help explain this? Don't both methods create a new function which is still called on the server? And how would "use server" expose it (as described in the error)? I tried reading the docs but the whole server side/ client side abstraction doesn't really click in my head, especially with this example. Thanks for your help!