Dynamically generated buttons within a button group are not properly styled.

[lehelk]

• [x] I have searched the Issues to see if this bug has already been reported
• [x] I have tested the latest version

Steps to reproduce

<div className='mb-4'>
  <ButtonGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
    <Button>Button 4</Button>
    <Button>Button 5</Button>
  </ButtonGroup>
</div>
<div className='mb-4'>
  <ButtonGroup>
    <Button>Button 1</Button>
    {[2, 3, 4].map(value => <Button key={value}>Button {value}</Button>)}
    <Button>Button 5</Button>
  </ButtonGroup>
</div>

Will have the following result:

Current behavior

On the second line in the provided screenshot (where there are dynamically generated buttons) the 3rd button has rounded borders on the right hand side while the 5th button doesn't have rounded borders on the right hand side.

Expected behavior

On the second line in the provided screenshot (where there are dynamically generated buttons) the 3rd button shouldn't have any rounded borders while the 5th button should have rounded borders on the right hand side.

[SutuSebastian]

Known issue, it's because the Children.map() does not go deeper than one level, so the props are not injected in the dynamically generated buttons due to being an [] array instead of a ReactNode or JSX.Element.