MenuOptionGroup onChange does not work on new menu items added dynamically

🐛 Bug report

Re-renders won’t update onChange because of memoization here: https://github.com/chakra-ui/chakra-ui/blob/a505441cafa1f1a5593eeae395feadd8083aae14/packages/menu/src/use-menu.ts#L572 .

💥 Steps to reproduce

          <MenuOptionGroup
            type="radio"
            onChange={(ids) => {
              const selected = items.filter((deck) => ids.includes(deck.id))>
              {items.map((item) => (
                <MenuItemOption key={item.id} value={item.id}>
                  {item.name}
                </MenuItemOption>
              ))}

1. add a new item to items array dynamically by setting state in parent
2. click on item in menu
3. selected is undefined

🧐 Expected behavior

New item should be selectable.

🧭 Possible Solution

Don’t useCallback in https://github.com/chakra-ui/chakra-ui/blob/a505441cafa1f1a5593eeae395feadd8083aae14/packages/menu/src/use-menu.ts#L572 .

[mcbroh]

You can solve this by using the MenuItemOption, use the onClick props together with the isCheckedprops and this should give you the same behavior you are looking for. I hope this helps

[natBizitza]

Any news on this one?