ToggleButtonGroup of onChange doesn't work when ToggleButton has a wrapper around it

Today we were trying to create several custom toggle buttons inside a ToggleButtonGroup as we need different styles depending on certain fields.

The following wouldn’t work; <ToggleButtonGroup onChange={handleChange}> <CustomToggleButton ... /> CustomToggleButton is literally just a standard ToggleButton but it applies different classNames.

If we changed CustomToggleButton to be ToggleButton then everything works as normal. Is is possible to achieve this? I hope I’m just being dumb and missing something obvious here.

We passed every prop down to the button and even used forwardRef just as a means to see if it would work but it didn’t.

We have many different styles to apply so it would be ideal to have a CustomToggleButton to handle these. Worst case scenario we’ll create a function to dictate which style to apply, but it would be preferable to use the above approach.

Thanks all.

[eps1lon]

Current workaround:

function CustomToggleButton(props) {
  return <ToggleButton {...props} />
}

And be sure to merge all own props properly.

[eps1lon]

Let’s keep this open and leave the umbrella issue separate. I have a working solution with context that was blocked by missing cleanup.