`btn-group` has inconsistent focus/active states when combined with hover states

Created by: umpox

Code example taken directly from the docs:

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Left button active, middle button hovered:

Middle button active, left button hovered:

Operating system: macOS Catalina 10.15.7 Browser: Chrome 90.0.4430.212