ToggleButtonGroup does not keep track of selected item, when value is an object

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When using state that is an object (not a string or number), ToggleButtonGroup does not track the selected item correctly. Perhaps the comparison should be a callback, passable via props?

Expected Behavior 🤔

Values should only be added to the list once, and items should be removed when clicked while selected.

Perhaps the comparison could be determined via a callback passed via props.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-gun9b

This is an example that does not use the exclusive prop.

1. Click the buttons
2. Observe in the console that the state list keeps growing with each click.
3. Also observe the buttons do not display as selected. (Overriding the ToggleButton selected prop to compare objects fixes this, but does not fix the state list growing in size.)

Context 🔦

I am attempting to keep track of state using the ToggleButtonGroup and ToggleButton components that is more complex than just a number or string.

Your Environment 🌎

Tech	Version
Material-UI (lab)	v4.0.0-alpha.48
React	16.13.1
Browser	Chrome (latest)
TypeScript	No

[nleve]

I found a workaround, but it does not involve letting ToggleButtonGroup manage state. It makes this more like an uncontrolled component I suppose.

    <ToggleButtonGroup aria-label="Selected Items">
      { items.map((item, i) => {
          return (
            <ToggleButton value={item}
                          selected={selectedItems.some(x => x.id === item.id)}
                          onClick={() => handleItemClick(item) }
                          aria-label={item.name}>
                {item.name}
            </ToggleButton>
          )
        })
      }
    </ToggleButtonGroup>

Then all state management is done in handleItemClick().

[reyiv]

Is this issue fixed? It is marked Closed but it still exists. I’m using mui/material 5.2.6 with React 17.0.2 . In my case, I’m needing to save the button state in the parent when the component is unmounted and supply the initial state when user navigates back to the component. It only works if the object value is JSON stringified (note the JSON.stringify is the value attribute of ToggleButton) . Although this hack works, it is not ideal since the object array is used elsewhere in my app. I recreated in CodeSandbox , https://codesandbox.io/s/dazzling-lake-dnwir?file=/src/ToggleButtons.js