controlled select with object options

[jonka5]

I'm facing a problem with a controlled Select. I'm following this example: https://www.remix-validated-form.io/reference/use-control-field

I'm using the select from grommet with object options like this

const options = [
{label: Germany, value: de},
{label: France, value: fr},
...
]

Here is an example: https://storybook.grommet.io/?path=/story/input-select-object-options--object-options

If I console.log(value) the correct value (= de/fr/... )is logged. But when submitting my form submits the label (= Germany/France/...) and not the value (= de/fr/... ).

export const CustomSelect: FC = ({ name, label, options, labelKey }) => {

const { error, validate } = useField(name);
const [value, setValue] = useControlField<{label: string, value: string}[]>(name);
console.log('value: ', value)

return (
    <Box flex={false} gap="2px">
        <Text size="xsmall" color='label'>{label}</Text>
        <Select
            name={name}
            options={options}
            labelKey={labelKey}
            valueKey={{key: "value", reduce: true}}
            value={value}
            onChange={({ value }) => {
                setValue(value);
                validate();
            }}
        />
        {error && (
            <Text color={'red'}>{error}</Text>
        )}
    </Box>
);

};

Any ideas?

[jonka5]

Missed the part with the hidden input. Works fine now.