inputValue.trim is not a function when using object array for items in autocomplete with "allowOtherValues"

[nikhilism15]

I have an autocomplete implementation where I am using an object array for the items, and I also want to have the property allowOtherValues to be true - but I get the error "inputValue.trim is not a function" when I try to select any item from the options.

Here's my code (sorry for the formatting, don't know why this is happening this way):

export const Simple = ({ name }: SimpleProps) => { return ( <> <Autocomplete items={[ { name: 'TABLE 1', tableId: 'table1' }, { name: 'TABLE 2', tableId: 'table 2' }, ]} itemToString={(item) => (item ? item.name : '')} onChange={(item) => console.log(item)} allowOtherValues={true} initialInputValue="TABLE 1" > {(props) => { const { getInputProps, getRef, inputValue, openMenu } = props; return ( <TextInput placeholder="Open on focus" value={inputValue} ref={getRef} {...getInputProps({ onFocus: () => { openMenu(); }, })} /> ); }} </Autocomplete> </> ); };

This seems to be a simple issue where the inputValue is assumed to be a string but it's actually an object. However, one would assume that if the Autocomplete has the itemToString property populated, then the trim function wouldn't apply on the object itself but the itemToString transformation of said object. Can you please sort this out?