Styled components component selector not working on mouse hover - css

Question

I'm trying to build that behavior illustrated by the following GIF on mouse hover.
The user can make the red selection by using the Arrow keys, but on mouse hover, I want to hide the red selection and show only the mouse hover green selection.
Code Sandbox Example
It is working, so far.
But somehow it breaks when I try to use the component selector: ${S.UserLi}, which is the name of my styled component for each li. It only works when I select general li items, like you can see in the following code (Sandbox link above).
QUESTION
How can I make it work using my component selector ${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;
}
`;
This is the main component:
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>
);
}