Submit server actions form in a sever component that is using nextjs cookies

Question

I have a server component (A language toggler) to change language and store the value in a cookie

The thing is, I want the form to be submitted when select input is changed (For better ux)

But I am using nextjs cookies from next/headers and it only works in server components so I can't use onChange or something client-sidey

What's the optimal solution for this?

LanguageToggle.tsx

import { cookies } from "next/headers"

const LanguageToggle = () => {
    async function setCookieLang(formData: FormData) {
        "use server"
        const lang = formData.get("lang")
        // console.log(lang)
        cookies().set("lang", lang)
    }

    return (
        <form action={setCookieLang}>
            Welcome!
            <select name="lang" id="lang" defaultValue="en">
                <option value="en">en</option>
                <option value="ar">ar</option>
            </select>
            <button type="submit">send!</button>
        </form>
    )
}

export default LanguageToggle

And thank you very much for your great help!