If I have a user object with a display name (e.g. John Smith) and a username (e.g. johsmi), how can I search for both display name and username?

This example will only search for usernames, i.e. it will find johsmi, but not Smith:

<Select

  showSearch={true}

  optionFilterProp=children

  placeholder=Select account

>

  {users.map(user => (

    <Select.Option value={user.name}>

      {user.displayName}                        

    </Select.Option>

  ))}

</Select>

I ended up adding the display name in the key attribute to make it searchable, but I wonder if it's the recommended way of doing it:

<Select.Option key={user.displayName} value={user.name}>

  {user.displayName}                        

</Select.Option>