[SELECT] Can't find a way to get select values

[LiteBluSky]

I hit a dead end again with the select component...

I want to display labels and validate values! As I've read in the docs, zod validates the labels, is there a workaround for this usecase?

country: z
      .nativeEnum(
        regions.reduce(
          (acc, region) => {
            acc[region.code] = region.displayName;
            return acc;
          },
          {} as Record<string, string>,
        ),
      )

[adityacodepublic]

const hi = {
  "label 1": "value1",
  "label 2": "value2",
  "label 3": "value3",
} as const;

<SelectContent>
        {(field.options || []).map(([key, label]) => (
          <SelectItem key={key} value={label}>
            {key}
          </SelectItem>
        ))}
</SelectContent>

try this

[LiteBluSky]

I never even thought about that...

<SelectContent>
        {(field.options || []).map(([key, label]) => (
          <SelectItem key={key} value={label}> // changed the value to the label
            {key} // changed from label to key 
          </SelectItem>
        ))}
</SelectContent>