fix(multi-select): Update selected state when pill is removed (#3076)

Update the `model.selected.items` when an item is unselected via the pills.

Fixes: [#3075](#3075)

[category:Components]

modules/preview-react/multi-select/lib/MultiSelectedList.tsx

@@ -10,15 +10,15 @@ export interface MultiSelectedListProps
   extends MultiSelectedItemProps,
     React.HTMLAttributes<HTMLDivElement> {}
 
-export const MultiSelectedList = createSubcomponent()({
+export const MultiSelectedList = createSubcomponent('div')({
   modelHook: useMultiSelectModel,
 })<MultiSelectedListProps>(({'aria-labelledby': ariaLabelledBy, removeLabel}, Element, model) => {
   return model.selected.state.items.length ? (
     <>
       <div data-part="separator" />
       <ListBox
         model={model.selected}
-        as="div"
+        as={Element}
         role="listbox"
         aria-orientation="horizontal"
         aria-labelledby={ariaLabelledBy}

modules/preview-react/multi-select/lib/useMultiSelectModel.ts

@@ -66,19 +66,12 @@ export const useMultiSelectModel = createModelHook({
     orientation: 'horizontal',
     onRemove({id}) {
       model.events.select({id});
+      setSelectedItems(cachedSelected.filter(item => item.id !== id));
     },
     shouldVirtualize: false,
     items: model.state.visibility === 'hidden' ? cachedSelected : selectedItems,
   });
 
-  const state = {
-    ...model.state,
-  };
-
-  const events = {
-    ...model.events,
-  };
-
   return {
     selected: {
       ...selected,
@@ -94,7 +87,5 @@ export const useMultiSelectModel = createModelHook({
       },
     },
     ...model,
-    state,
-    events,
   };
 });