Error from defining an inline "use server" annotated Server Action

[peckqyang]

For Chapter 15: Adding Authentication, the provided implementation for the sign out button leads to the following error.

Error: 
  × It is not allowed to define inline "use server" annotated Server Actions in Client Components.
  │ To use Server Actions in a Client Component, you can either export them from a separate file with "use server" at the top, or pass them down through props from a Server Component.
  │ 
  │ Read more: https://nextjs.org/docs/app/api-reference/functions/server-actions#with-client-components
  │ 
    ╭─[/Users/peckyang/Dropbox/12 Code/NextJS/NextJS Dashboard/nextjs-dashboard/app/ui/dashboard/sidenav.tsx:20:1]
 20 │             <NavLinks />
 21 │             <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
 22 │             <form
 23 │ ╭─▶           action={async () => {
 24 │ │               'use server';
 25 │ │               await signOut();
 26 │ ╰─▶           }}

I resolved this by moving the signout action to actions.ts file and set that to be the form's action.

export async function signout() {
  await signOut();
}

Was the original implementation in the tutorial not consistent with how Server Actions are handled in NextJS or did I miss something?