How to pass default value as a prop to Select Component?

[cockyb]

Common way to use select in react (uncontrolled)

 <select name="selectedFruit" defaultValue="orange">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="orange">Orange</option>
 </select>

controlled

function FruitPicker() {
  const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
  // ...
  return (
    <select
      value={selectedFruit} // ...force the select's value to match the state variable...
      onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
    >
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="orange">Orange</option>
    </select>
  );
}

how to controll 'Select' Component in 'react-aria-components'

import {Button, Item, Label, ListBox, Popover, Select, SelectValue} from 'react-aria-components';

<Select
// defaultValue='Cat'
// or
// value='Cat'
// onChange={...}
>
  <Label>Favorite Animal</Label>
  <Button>
    <SelectValue />
    <span aria-hidden="true">▼</span>
  </Button>
  <Popover>
    <ListBox>
      <Item>Aardvark</Item>
      <Item>Cat</Item>
      <Item>Dog</Item>
      <Item>Kangaroo</Item>
      <Item>Panda</Item>
      <Item>Snake</Item>
    </ListBox>
  </Popover>
</Select>

[devongovett]

https://react-spectrum.adobe.com/react-aria/Select.html#controlled-selection

[cockyb]

thank you

forgive me for being lazy