Next.js useFormStatus issue

Question

Its my second time using server actions with next.js on a new project after a month, and even though the code seems correct, i get this error:

TypeError: (0 , react_dom__WEBPACK_IMPORTED_MODULE_2__.useFormStatus) is not a function

form component:

"use client"
import { sendEmail } from '@/actions/sendEmail'
import React from 'react'
import SubmitButton from './SubmitButton'

export default function ContactInner({contact}: {contact: any}) {
  return (
    <section className="w-full items-center justify-center flex flex-col px-4 pb-28 2xl:pt-12 py-8">
        <div className='w-[min(100%,38rem)] flex flex-col text-center gap-4'>
        <h1 className='text-3xl md:text-4xl font-semibold'>{contact.title}</h1>
        <p className='text-neutral-700 dark:text-neutral-400'>
        {contact.descriptionpart1}{" "}
          <a className='underline' href='mailto:[email protected]'>
            [email protected]
          </a>
        {" "}{contact.descriptionpart2}
        </p>

        <form
        className='mt-4 flex flex-col'
        action={async formData => {
          await sendEmail(formData)
        }}
        >
          <input name='senderEmail' className='px-4 h-14 rounded-lg border border-border bg-transparent outline-none focus:border-primary transition duration-200' type="email" required maxLength={100} placeholder={contact.inputplaceholder}/>
          <textarea name='message' className='p-4 h-52 my-3 rounded-lg border border-border bg-transparent outline-none focus:border-primary transition duration-200' required maxLength={5000} placeholder={contact.textareaplaceholder}/>
          <SubmitButton buttonLabel={contact.buttonLabel}/>
        </form>
        </div>
    </section>
  )
}

so i have this form that sends emails using resend, which works so i tried to have a pending/loading state and created a button element like this:

"use client"

import React from 'react'
import { useFormStatus } from 'react-dom'
import { FaPaperPlane } from 'react-icons/fa'

export default function SubmitButton({buttonLabel}: {buttonLabel: any}) {
  const { pending } = useFormStatus()
  return (
  <button 
    className="focus:scale-110 hover:scale-110 active:scale-105 group flex gap-2 items-center justify-center h-[3rem] w-[8rem] 
    rounded-full bg-gray-900 hover:bg-gray-950 dark:bg-slate-200 dark:hover:bg-slate-300 outline-none transition-all 
    duration-200 text-white dark:text-black" 
    type='submit'>
        {buttonLabel}
      <FaPaperPlane className="transition duration-200 text-xs opacity-80 group-hover:-translate-y-1 group-hover:translate-x-1"/>
  </button>
  )
}

so the issue is when i do const { pending } = useFormStatus(), i get the error mentioned above, i can see that useFormStatus is imported but idk why i get the error, might be a new update? so if anyone knows the reason please do help. Thanks in advance

Answer 1

Its Not experimental anymore:

import { useFormStatus } from 'react-dom'