How can I use :hover within a React element, using styled-components?

It is not so complicated. You just need to use my given syntax instead of the one you used:

&: hover {...}

I used the wrong selector

Bms bharadwaj pointed out I should have used: &: hover {...}

Not this: ::hover: {...}