I'm having an issue calling one of my actions in a client component. What I have is a form with an attribute of action, this calls a function which saves one of the form data and calls a server function. However, it doesn't allow me to make the request.. why?
Uncaught Error: Client Functions cannot be passed directly to Server Functions. Only Functions passed from the Server can be passed back again.

/page.tsx

<form action={(data) => handleSubmit(data, user, isNewGoogleUser)} className={styles.form__container} autoComplete="true">
                <div className={styles.form__option}>
                    <label htmlFor="highschool">High School</label>
                    <div className={`${styles.input__container} ${styles.input__option}`}>
                        <Image src={"/svgs/info-circle.svg"} alt="Info Icon" width={20} height={20} />
                        <input type="text" id="highschool" name="highschool" onChange={({ target }) => user.setProperty("currentHighschool", target.value)} placeholder="Tell us your current highschool" />
                    </div>
                </div>

                <button type="submit" className={styles.next}>
                    <Image src={"/svgs/thumb-up.svg"} alt="Thumbs Up" width={24} height={24} />
                    Finish
                </button>
            </form>

// * Handle storing and submitting data
async function handleSubmit(data: FormData, user: UserInfo, isNewGoogleUser: boolean) {
    const highschool = data.get("highschool");
    if (highschool) user.setProperty("currentHighschool", highschool);

    createUser(user, isNewGoogleUser)
}

_actions/info.ts

export async function createUser(user: UserInfo, isGoogleUser: boolean) {
  console.log(user, isGoogleUser);

  return;
}