Next.js make server action with Shadcn ui select

I'm trying to make a server action with data from Shadcn ui select. However, when I try to console log the result, I'm getting this:

FormData { [Symbol(state)]: [ { name: '$ACTION_ID_44456456465464646...', value: '' } ] }

The UI code:

    "use client";

import { Button } from "@/components/ui/button";
import * as React from "react";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select";

import { Submit } from "@/lib/actions";

export default function Home() {
    return (
            <form action={Submit}>
                <div className="grid w-full items-center">
                    <div className="flex flex-col space-y-1.5">
                        <Label htmlFor="framework">Genre</Label>
                        <Select>
                            <SelectTrigger
                                id="framework"
                                name="framework"
                            >
                                <SelectValue placeholder="Select" />
                            </SelectTrigger>

                            <SelectContent position="popper">
                                <SelectItem value="next">
                                    Next.js
                                </SelectItem>
                                <SelectItem value="sveltekit">
                                    SvelteKit
                                </SelectItem>
                                <SelectItem value="astro">
                                    Astro
                                </SelectItem>
                                <SelectItem value="nuxt">
                                    Nuxt.js
                                </SelectItem>
                            </SelectContent>
                        </Select>
                    </div>
                </div>
                <Button type="submit">Find</Button>
            </form>
    );
}

The server action code:

"use server";

export async function Submit(data?: FormData) {
    console.log(data);
}

I have accomplished getting the value on the client side, but that doesn't meet my needs.

You need to add the name attribute to the Select instead of SelectTrigger

Try modifying the select to below

<Select name="framework">
 <SelectTrigger id="framework">
    <SelectValue placeholder="Select" />
  </SelectTrigger>

  <SelectContent position="popper">
    <SelectItem value="next">Next.js</SelectItem>
    <SelectItem value="sveltekit">SvelteKit</SelectItem>
    <SelectItem value="astro">Astro</SelectItem>
    <SelectItem value="nuxt">Nuxt.js</SelectItem>
  </SelectContent>
</Select>;

Then you can get the value of select using data.get("framework"); in your @/lib/actions file.