I am using nextjs 13.4.8
Error I got: TypeError: react_domWEBPACK_IMPORTED_MODULE_4.useFormStatus is not a function

 "use client";

import Heading from "./heading";
import { motion } from "framer-motion";
import { useSectionInView } from "@/lib/hooks";
import { sendEmail } from "@/actions/sendEmail";
import { useFormStatus } from "react-dom";

import SubmitBtn from "./submit-btn";

export default function Contact() {
  const { ref } = useSectionInView("Skills", 0.5);
  const { pending } = useFormStatus();

  return (

    <motion.section ref={ref} id="contact" className="mb-20 sm:mb-28 w-[min(100%, 38rem)]"
      initial={{
        opacity: 0
      }}
      whileInView={{
        opacity: 1
      }}
      transition={{
        duration: 1
      }}
      viewport={{ once: true }}
    >
      <Heading>Contact Me</Heading>
      <p className="text-gray-700 text-center">Please contact me directly at <a href="mailto:example@gmail.com"></a> or through this form.</p>

      <form action={async (formData) => {
        await sendEmail(formData);
      }} className="mt-10 flex flex-col">
        <input type="email" name="email"
          required
          maxLength={500}
          className="h-14 px-4 rounded-lg borderBlack focus:outline-black focus:outline focus:outline-2" placeholder="Your email"
        />
        <textarea name="message" id="message"
          required
          maxLength={5000}
          className="h-52 my-3 rounded-lg borderBlack p-4 focus:outline-black focus:outline focus:outline-2"
          placeholder="Your message"
        ></textarea>
        <SubmitBtn pending={pending} />
      </form>
    </motion.section>
  )
}