Bug - ToggleGroup - Non-ReactElement children cause a runtime render error

[dvail]

Describe the problem

The children prop of ToggleGroup is declared to accept React.ReactNode, but throws an error during render if any child is passed that isn't a React.ReactElement.

A type assertion and property access assumes that every child element will have a type property, which isn't the case for valid React.ReactNode values like string, number, null, and undefined.

How do you reproduce the problem?

CodeSandbox repro: https://codesandbox.io/s/romantic-sea-nd3bzp?file=/index.js
(Note that the CodeSandbox is in plain JS, the problem is that the crashing example correctly type-checks in a TS project.)

Expected behavior

Either:

• <ToggleGroup> correctly accepts non-ReactElement children without crashing
• <ToggleGroup> declares a children prop that does not type-check with runtime errors

Is this issue blocking you?

The workaround in our case is to change conditional rendering blocks like:

            {entityContext !== 'CVE' && (
                <ToggleGroupItem
                    text={`${cveCount} CVEs`}
                    buttonId="cves"
                    isSelected={activeEntityTabKey === 'CVE'}
                    onChange={() => setActiveEntityTabKey('CVE')}
                />
            )}

to

            {entityContext !== 'CVE' ? (
                <ToggleGroupItem
                    text={`${cveCount} CVEs`}
                    buttonId="cves"
                    isSelected={activeEntityTabKey === 'CVE'}
                    onChange={() => setActiveEntityTabKey('CVE')}
                />
            ) : (
                <></>
            )}

Screenshots
N/A - runtime error

What is your environment?

• OS: MacOS
• Browser: Chrome/Firefox
• Version: latest

What is your product and what release date are you targeting?
Red Hat ACS

Any other information?