I keep getting this red line below “State” in my AboutUs function.
When I hover over the red line I get this message

Cannot find name 'State'.ts(2304)

type State = /*unresolved*/ any

This is the piece of code where the error is.

const [formState, action] = useFormState<State, FormData>(
    actions.contactForm,
    {
      errors: {},
      sentSuccessfully: false,
    }
  ); 

As expected, when I go to npm run build I get a failed to compile message

Type error: Cannot find name 'State'.

  11 | export default function AboutUs() {
  12 |   const [open, setOpen] = useState(false);
> 13 |   const [formState, action] = useFormState<State, FormData>(
     |                                            ^
  14 |     actions.contactForm,
  15 |     {
  16 |       errors: {},

The contactForm function being used in useFormState looks like

"use server";
import { z } from "zod";

const CONTACT_FORM_TOPICS = [
  "Write For Us",
  "Sponsorship Opportunity",
  "I Have A Story For You",
  "Other",
] as const;

const CONTACT_FORM_CONSENT = ["on", "null"] as const;

const createContactFormSchema = z.object({
  name: z.string().min(3),
  email: z.string().email(),
  topic: z.enum(CONTACT_FORM_TOPICS, {
    errorMap: (issue, ctx) => ({ message: "Please select one of the options" }),
  }),
  messageContent: z.string().min(10),
  consent: z.enum(CONTACT_FORM_CONSENT, {
    errorMap: (issue, ctx) => ({
      message: "Please tick the consent box to proceed",
    }),
  }),
});

interface CreatePostFormState {
  errors?: {
    topic?: string[];
    name?: string[];
    email?: string[];
    messageContent?: string[];
    _form?: string[];
  };
  sentSuccessfully?: boolean;
}

export async function contactForm(
  formState: CreatePostFormState,
  formData: FormData
) {
  const submittedForm = createContactFormSchema.safeParse({
    topic: formData.get("topic"),
    name: formData.get("name"),
    email: formData.get("email"),
    messageContent: formData.get("messageContent"),
    consent: formData.get("consent"),
  });
  if (!submittedForm.success) {
    return {
      errors: submittedForm.error.flatten().fieldErrors,
    };
  }
  const date = new Date().toString();

  if (submittedForm.success) {
    try {
      await fetch(`${process.env.URL}/api/send`, {
        method: "POST",
        body: JSON.stringify({
          topic: submittedForm.data.topic,
          name: submittedForm.data.name,
          email: submittedForm.data.email,
          message: submittedForm.data.messageContent,
          date,
        }),
      });
      return {
        sentSuccessfully: true,
      };
    } catch (error) {
      console.log(error);
    }
  }
}

I’ve tried using

Promise<CreatePostFormState>

and

Promise<any> 

as a return type in the contactform action but the error still persists.

How can I get rid of the type error for State?