<ListBox /> Better api for a fully controlled multiselect listbox with filter and footer

# Feature request

## Is your feature request related to a problem?

In projects, we have lots of common case like a multiselect filter using paginated API and searching API to render the listbox options, and most of them are using ``.
Example like here:

When we have a listbox footer and the multiselect become explicit, if users click outside to close the popover, we should revert the listbox state to the previous state, like a Cancel action if users click the `Cancel` button in ``. When we dispatch the `cancel` action in listbox component, we should revert the state of `selectedOptions`.

Sometimes we have to use a fully controlled listbox, because we need to refresh the list of options each time when searching or fetching more data. Using a fully controlled listbox with footer means I have to sync the `selectedOptions`, between my application and the listbox component. Currently there's no way to sync the internal state of listbox from outside, I can only render the `ListBox.Option` component by a controlled way like ``, but that doesn't mean I updated the internal state of listbox. This is causing some weird bugs, like sometimes listbox label cannot find the selected item, because the `options` are updated, but `selectedIds` didn't.

## Describe the solution you'd like

First I wish in my app I can remove and add my ``, `` without any issues

Then, I wish it would be easier to use a multiselect listbox like this:

```jsx

'call my API and refresh the option list'}}/>
{
myOptions.map(option => )
}
'I can revert my option list'}
/>

```
If I can get the previous state from listbox component, I don't need to cache it in my app, it will save lots of effort in my application side.

## Describe alternatives you've considered

## Additional context