How to clear ListBox selected item when list changes?

[shafkathullah]

Consider this example https://codesandbox.io/s/elated-wildflower-ksxvkd?file=/pages/index.js.

Here when we toggle the data set, the selected item stays the same, without clearing of to default value(ie, first ), whats the elegant way to clear selected item state, when list changes..?

Note: My current solutions are 1) to pass a different key prop to the component when list items changes
2) add useEffect and watch list change and setSelected item