React-Bootstrap Toggle Button is Failing to Hide the Radio Button Circle

Question

In my form, I want toggle buttons. The following code is copied from react-bootstrap docs on toggle buttons. However, the radio-button circles are displaying when they should be hidden. How do I hide them?

import ButtonGroup from 'react-bootstrap/ButtonGroup'
import ToggleButton from 'react-bootstrap/ToggleButton

'

<ButtonGroup>
   {radios.map((radio, idx) => (
    <ToggleButton
     key={idx}
     id={`radio-${idx}`}
     type="radio"
     variant={idx % 2 ? 'outline-success' : 'outline-danger'}
     name="radio"
     value={radio.value}
     checked={radioValue === radio.value}
     onChange={(e) => setRadioValue(e.currentTarget.value)}
                                    >
     {radio.name}
    </ToggleButton>
      ))}
 </ButtonGroup>

Answer 1

Use the <ToggleButtonGroup /> component as the container. Set type to radio. Note that name is required when type is radio

See code below

<ToggleButtonGroup type="radio" name="radio">
  {radios.map((radio, idx) => (
    <ToggleButton
      key={idx}
      id={`radio-${idx}`}
      variant={idx % 2 ? 'outline-success' : 'outline-danger'}
      value={radio.value}
      checked={radioValue === radio.value}
      onChange={(e) => setRadioValue(e.currentTarget.value)}
    >
      {radio.name}
    </ToggleButton>
  ))}
</ToggleButtonGroup>