blah.js

const users = [];

// What is the button label?
// 1. button.props.children, can server render

// What is the option's value?
// 1. option.props.value, that's it, it's required, no fancy children stuff

// if we require controlled
// - they know the value all the time before we even show up
// - they can render whatever they want in the button
// - it server render
// - we don't need a double render, just need indexes for focus and we
//   can do that w/o a double render
//
// But ...
// - they always have to implement the button label

function App() {
  const [selection, setSelection] = useState('blah');
  const user = users.find(thing => selection === thing.id);
  return (
    <Listbox value={selection} onChange={setSelection}>
      <ListboxButton>{user.displayName}</ListboxButton>
      <ListboxPopup>
        <ListboxList>
          {users.map(thing => (
            <ListboxOption
              value={thing.id}
              searchText={thing.name + ' ' + thing.email}
            >
              <Avatar size={50} uid={id} /> {thing.name}
              <br />
              <small>{thing.email}</small>
            </ListboxOption>
          ))}
        </ListboxList>
        <div>
          <button>Add new user</button> <Link to="/users">Manage Users</Link>
        </div>
      </ListboxPopup>
    </Listbox>
  );
}

function NotGross(props) {
  return <ListboxOption classNAme="blah" {...props} />;
}

<ListboxContainer portal={false}>
  <Actions />
  <Listbox defaultValue="one">
    <ListboxOption value="one" collapsed="Chance">
      <Avatar /> Chance {email}
    </ListboxOption>
    <ListboxOption value="two" collapsed="Chance">
      <Avatar /> Chance {email}
    </ListboxOption>
  </Listbox>
</ListboxContainer>;