Why are the buttons not highlighted when clicked?

There are two icons for increasing and decreasing the number. If you just click, the active-state class for is not added, therefore the icons are not highlighted in gray. It is necessary to strongly click on the icon (button) so that the icon is highlighted with a gray background, that is, the active-state class is added. What could be the problem?

<Segment>
    <Button outline className='decrement item-link'>
       <Icon icon="icon-expand-down"></Icon>
    </Button>
       <label>letterSpacing</label>
    <Button outline className='increment item-link'>
     <Icon icon="icon-expand-up"></Icon>
    </Button>
</Segment>

If remove the arrow icons, then the active-state class is added without a strong click on the button.But you need to leave these icons

Would be good to see live example How to ask a good question on forum