Next.js Client Component consuming a Server Action

EditAccount.tsx

'use client'
import { Button } from '@/components/ui/button'
import { useCallback, useState } from 'react'
import { updateAccount } from '../actions'

type Profile = {
  avatarUrl: string
  email?: string
  fullName: string
  userId: string
  username: string
  website: string
}

export default function EditAccount({
  avatarUrl,
  email,
  fullName,
  userId,
  username,
  website,
}: Profile) {
  
// ... //

const onSubmit = useCallback(
    async (formData: FormData) => {
      setLoading(true)
      const res = await updateAccount(formData, userId)
      if (res && res.message === 'Success') {
        // Success toast popup
      }
    },
    [userId],
  )

// ... //

return (
  <form action={onSubmit}>

  </form>
)

}