Bug: pseudo styles don't work properly if React state does not change when clicking with right mouse button.

I have a button that changes background in :hover and :active states. Clicking the button with left mouse button (LMB) works fine, styles change as they should. But, clicking with right mouse button (RMB) works fine only if underlying react state is actually changed (e.g. different from the previous state)

React version: 17.0.2

Steps To Reproduce

1. Open the code example provided below
2. Click the "Click Me" button with LMB more than 2 times (DON'T move your mouse cursor while clicking)
3. Click the "Click Me" button with RMB more than 2 times (DON'T move your mouse cursor while clicking)

Link to code example: https://codesandbox.io/s/pensive-sunset-z1t69f

The current behavior

No mater how many times you click with LMB, the "Click Me" button consistently changes its background color to yellow when you hold LMB down, and changes it back to silver when you release LMB.

The second time RMB pressed down, the background color of the "Click Me" button remains yellow, even if you release RMB. That is, whenever you click it with RMB and the new react state is the same as the previous, the button style remains yellow even if you release RMB.

The expected behavior

Clicking the "Click Me" button with RMB should respect styles regardless of the underlying react state.

Start with the CodeSandbox example linked in the issue and reproduce the difference between left- and right-button clicks when React state remains unchanged. Trace the button's state updates and pseudo-style behavior, then verify that repeated right-clicks restore the expected styling after release.