I'm trying to use useActionState with my server action so that i can get errors and whatnot, however it's not working, and i'm not entirely sure what i'm doing wrong here.

I'm getting this error:

 src/app/newTournament/page.tsx (8:46) @ createTournament
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useActionState) is not a function or its return value is not iterable
    at NewTournamentPage (./src/app/newTournament/page.tsx:16:86)
digest: "4147396611"
   6 |
   7 | export default function NewTournamentPage() {
>  8 |   const [state, formAction] = useActionState(createTournament, undefined);
     |                                              ^
   9 |   return (
  10 |     <div className="w-full flex flex-col items-center justify-center">
  11 |       <p className="font-bold text-3xl pb-6">Create Tournament</p>

here is the relevant code:

page the action is used on

"use client";

import { useActionState } from "react";
import { createTournament } from "../actions";
import Input from "../components/Input";

export default function NewTournamentPage() {
  const [state, formAction] = useActionState(createTournament, undefined);
  return (
    <div className="w-full flex flex-col items-center justify-center">
      <p className="font-bold text-3xl pb-6">Create Tournament</p>
      <form action={formAction} className="flex flex-col gap-3">
        ...
      </form>
    </div>
  );
}

the action:

export async function createTournament(
  state: ActionStateType,
  formData: FormData
): Promise<ActionStateType> {
  const session = await auth();
  if (!session) {
    return {
      success: false,
      error: "Not authenticated",
    };
  }

  const schema = z.object({
    tournamentName: z.string(),
    tournamentAcronym: z.string(),
    hostId: z.string(),
  });

  const result = schema.safeParse(formData);
  if (!result.success)
    return { success: false, error: "Schema validation failed." };

  await prisma.tournament.create({
    data: {
      tournamentName: result.data.tournamentName,
      tournamentAcronym: result.data.tournamentAcronym,
      hostId: result.data.hostId,
    },
  });

  return {
    success: true,
    response: "Tournament successfully created",
  };
}

the ActionStateType:

export type ActionStateType<T = string> =
  | {
      success: boolean;
      error?: string;
      response?: T;
    }
  | undefined;

If anyone could help it would be greatly appreciated, thank you!