Селектор компонентов в стиле компонентов не работает при наведении мыши

Question

Я пытаюсь построить такое поведение, иллюстрируемое следующим GIF при наведении мыши.

Пользователь может сделать выбор красный , используя клавиши со стрелками , но при наведении курсора мыши я хочу скрыть выбор красный и отображать только наведение мыши зеленый выбор.

Пример песочницы кода

Пока работает.

Но как-то он ломается, когда я пытаюсь использовать селектор компонента: ${S.UserLi}, который является именем моего стилизованного компонента для каждого li. Это работает только когда я выбираю общие элементы li, как вы можете видеть в следующем коде (ссылка на песочницу выше).

ВОПРОС

Как я могу заставить его работать, используя мой селектор компонентов ${S.UserLi}?

S.MentionDiv = styled.div`
  max-width: 200px;
  height : auto;
  overflow: hidden;
  background-color: lightblue;
  padding: 5px;
  box-sizing: border-box;
  ul {
    margin: 0;
  }
  &:hover {
    li { background-color: inherit; } /* THIS WORKS */
    /* ${S.UserLi} { background-color: inherit; } */ /*THIS DOESN'T*/
  }
`;

S.UserLi = styled.li`
  background-color: ${props => props.selected ? 'red' : 'inherit'};
  &&:hover { /* Added two && to make it higher priority over hover on MentionDiv */
    background-color:lightgreen;
    user-select: none;
  }
`;

Это основной компонент:

function App() {
  return (
    <S.MentionDiv>
      <S.UserLi>
        User 1
      </S.UserLi>
      <S.UserLi
        selected={true}
      >
        User 2
      </S.UserLi>
      <S.UserLi>
        User 3
      </S.UserLi>
    </S.MentionDiv>
  );
}