Running into an issue where all I would like to do is disable form interactivity while a form action (server action) is being performed. My code is below, with styling removed for ease of reading.

const ForgotPasswordForm = () => {
    const initialState = { message: '' }
    const [state, formAction] = useFormState(sendPasswordReset, initialState)
    const { pending } = useFormStatus()

    return (
        <div>
            <div>
                <div>
                    <div>
                        <h1>
                            Forgot your password?
                        </h1>
                    </div>
                    <h2>
                        Enter the email you used to sign up with.
                    </h2>
                    <form action={formAction}>

                        <input disabled={pending} type="email" name="email" id="email" autoComplete="off" required />
                        <button disabled={pending} type="submit">Reset Password</button>

                    </form>
                    
                    <p>{state?.message}</p>
                    <p">
                        Don’t have an account yet? <Link href="/signup">Sign up</Link>
                    </p>
                </div>
            </div>
        </div>
    )