Why can't 'value' be correctly inferred?

[alvarezdct]

I have a function whose structure is the following:

export function Foo({
    options,
    listboxProps,
} : {options: {option: string, id: string}[], listboxProps: Omit<ListboxProps, 'value'>}) {
    return (
        <Listbox  {...listboxProps} value={options[0]}>
         //...
        </Listbox>
    )
}

Here is the error:

Type '{ option: string; id: string; }' is not assignable to type 'string'.ts(2322)
listbox.d.ts(17, 5): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & CleanProps<ExoticComponent<{ children?: ReactNode; }>, "form" | "value" | "defaultValue" | "onChange" | "by" | ... 5 more ... | "__demoMode"> & OurProps<...> & { ...; } & { ...; }'

I am omitting 'value' from ListboxProps, and then passing an assignment to the < Listbox /> value prop via the 'options' argument. I thought Typescript should be able to assign the correct type automatically but it doesn't. Could anyone answer as to why this happens?