DropdownItem as button

[idc77]

Using NextJS and next-auth v5

import {DropdownItem} from 'flowbite-react';
import {useTranslations} from 'next-intl';
import React from 'react';
import {signOut} from '@/auth';

export default function SignOut() {
    const t = useTranslations()

    return (
        <>
            <form action={async () => {
                "use server"
                await signOut({redirectTo: "/"})
            }}>
            <DropdownItem type="submit">
                {t('auth.sign_out')}
            </DropdownItem>
            </form>
        </>
    )
}

I can't put a <button> inside because you can't have a button in a button.
But I need the submit to fire. However while DropdownItem extends button, it's not recognized by the form as a valid button element.

[idc77]

import {DropdownItem} from 'flowbite-react';
import {useTranslations} from 'next-intl';
import React from 'react';
import {signOut} from '@/auth';

export default function SignOut() {
    const t = useTranslations()
    async function signOutAction() {
        "use server"
        await signOut({redirectTo: "/"})
    }
    return (
        <>
            <DropdownItem onClick={signOutAction}>
                {t('auth.sign_out')}
            </DropdownItem>
        </>
    )
}