React Youtube card. Playbutton not rendering properly in CSS

I have below example where I am trying to render a YouTube card. The issue I am facing is that the play button white background is not adjusting into the play icon that I am setting through my CSS styles. I am trying to undertand why that is not working.

Also, when I hover the card, I should see a background that says Video Test, but that never gets rendered.

https://stackblitz.com/edit/ndu1t6?file=src%2Fexample.tsx,src%2FYoutubeCard.tsx

Why is this part giving the trouble?

'&:hover': {
  transform: 'scale(1.05)',
  boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
},
'&:hover $overlay': {
  backgroundColor: 'rgba(0, 0, 0, 0.6)',
},
'&:hover $textOverlay': {
  opacity: 1,
},
'&:hover $playButton': {
  opacity: 0,
},