I am using nextjs 14 app router. But i am getting the error: "Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it."

My question is why the error message mentioning Client Component when there is no client component in my code.

//index.js
export const handleSubmit = async(formData) => {
    console.log(formData.get("name"));
}

//AddTaskForm.jsx
import {handleSubmit} from "@/app/action/index"
const AddTaskForm = () => {
    return (
        <form action={handleSubmit} className="mt-10 flex flex-col gap-4 w-[300px] mx-auto">
            <div className="flex flex-col gap-2">
                <label htmlFor="name">Name</label>
                <input className="border border-black" type="text" id="name" name="name" />
            </div>
            <button type="submit" className="bg-purple-500 py-2">Submit</button>
        </form>
    );
};
export default AddTaskForm;

//page.js
import AddTaskForm from '@/app/ui/AddTaskForm';
export default function Home() {
  return (
    <AddTaskForm/>
  );
}

Is the error message misleading?