SelectPanel bug when we have static items list is inside same component

[eriknyk]

Description

SelectPanel works buggy when we have static items list inside same component.
I just copy/paste the code of the selectpanel example from https://primer.style/components/selectpanel/react/alpha

export default function Home() {
  return (
    <>
      <SelectorDemo />
    </>
  );
}


function SelectorDemo() {
  const items = [
    {text: 'enhancement', description: 'Something to enhancement', id: 1},
    {text: 'bug', description: `Something isn't working`, id: 2},
  ]

  const [selected, setSelected] = React.useState<ItemInput[]>([])
  const [filter, setFilter] = React.useState('')
  const filteredItems = items.filter((item) => item.text.toLowerCase().startsWith(filter.toLowerCase()))
  const [open, setOpen] = useState(false)

  return (
    <>
      <h1>Multi Select Panel</h1>
      <SelectPanel
        title="Select labels"
        subtitle="Use labels to organize issues and pull requests"
        renderAnchor={({
           children,
           'aria-labelledby': ariaLabelledBy,
           ...anchorProps
         }) => (
          <Button
            trailingAction={TriangleDownIcon}
            aria-labelledby={` ${ariaLabelledBy}`}
            {...anchorProps}
            aria-haspopup="dialog"
          >
            {children ?? 'Select Labels'}
          </Button>
        )}
        placeholderText="Filter labels"
        open={open}
        onOpenChange={setOpen}
        items={filteredItems}
        selected={selected}
        onSelectedChange={setSelected}
        onFilterChange={setFilter}
        showItemDividers={true}
        overlayProps={{
          width: 'small',
          height: 'xsmall',
        }}
      />
    </>
  )
}

But got the following issue, now it works as expected if I move items array outside the component and pass it as component params, but I just wanted to post it here to track the behaviour, I think that is valid scenario to have a selepanel with static items in same component and not always the items will be passed to the component. See video below.

Screen.Recording.2024-07-10.at.2.15.49.PM.mov

Regards.

Steps to reproduce

1. Clone repo https://github.com/eriknyk/primer-demo.git
2. Run: npm run dev
3. See how bun in SelectPanel component

Version

36.25.0

Browser

Chrome