Select component submitting first option even when internal value is empty string

[thomasst-osu]

Maybe I am missing an implementation detail somewhere, but I am using the Select theme component for a form input that is optional. I am directly controlling it and setting the initial value to an empty string (""). This allows the placeholder to show up, but if the form is submitted without an option being selected, the first <Select.Item> is sent instead of an empty string or no value at all.

This seems like a limitation that I can't seem to circumvent. Ideally, I would rather the internal select tag submit an empty string if no value has been selected. I normally get around this by using <option value=""></option> in the standard html select tag, but since Radix does not allow an empty string as a value for <Select.Item> this doesn't seem to be an option.

Is there an elegant way to submit an empty string or not submit a value at all when no <Select.Item> has been selected?

When the code below is submitted without any user interaction, the form data shows "value-1" for the submission instead of "".
Basic code snippet:

const [selectValue, setSelectValue] = useState<string>("")

<Select.Root
  name="select-test"
  value={selectValue}
  onValueChange={val => setSelectValue(val)}
>
  <Select.Trigger />
  <Select.Content>
    <Select.Item value="value-1">Value 1</Select.Item>
    <Select.Item value="value-2">Value 2</Select.Item>
    <Select.Item value="value-3">Value 3</Select.Item>
  </Select.Content>
</Select.Root>

I attempted to try my normal trick:

// State management
// Select.Root, Select.Trigger, ...
<Select.Content>
  <Select.Item value=""></Select.Item>
  <Select.Item value="value-1">Value 1</Select.Item>
  // ...
</Select.Content>

But Radix does not allow the empty string as a value...