How to use useState with Select?

[mattbal]

Hi,
I'm trying to use useState with Select so that I have access to the current selected option and so I can also set a default selected value.
I found this example in the documentation, which shows how to use useState, but when I tried matching that code, I get two errors:

1. Property 'items' does not exist on type 'IntrinsicAttributes & SelectProps<object> & RefAttributes<HTMLDivElement>'.ts(2322)
2. My default value is still set to "Select an item" as opposed to the default value I set with the selectedKey property.

On 1, I don't see items listed in the props for Select in the documentation. Did items get removed at some point as a prop? Do I need to even use items if I have a popover with a listbox?

On 2, this one I'm completely thrown by. Am I not passing in the right value to selectedKey?

Any help would be greatly appreciated

import { useState } from 'react';
import type { Key } from 'react-aria-components';

let statusOptions = [
  { name: 'Applied' },
  { name: 'Offered' },
  { name: 'Rejected' },
];
const [status, setStatus] = useState<Key>('Applied');

return (
  <Select
    items={statusOptions}
    selectedKey={status}
    onSelectionChange={(selected) => setStatus(selected)}
  >
    <Label>Status</Label>
    <Button>
      <SelectValue />
      <ChevronDownIcon />
    </Button>
    <Popover>
      <ListBox>
        <ListBoxItem>
          <Status>Applied</Status>
        </ListBoxItem>
        <ListBoxItem>
          <Status>Offered</Status>
        </ListBoxItem>
        <ListBoxItem>
          <Status>Rejected</Status>
        </ListBoxItem>
      </ListBox>
    </Popover>
  </Select>
)

[reidbarber]

1. items goes on Listbox instead of Select (same with the selection props). The example in the docs is a custom MySelect wrapper that sends those down to the Listbox, so I can see how that could be confusing.
2. "Select an item" is the default placeholder (shown if no items are selected). It can be customized with the placeholder prop. This should update to your selected item once you pass selection into the Listbox, as mentioned above.

And to access the selection state from inside, you can use render props or contexts. If you do that, you don't even need to do a fully controlled version.

[mattbal]

Thanks!