Обращение к другому стилизованному компоненту при использовании Gatsby Image

Question

Вот что я пытаюсь сделать. У меня есть круг с тенью под ним, выглядит так ...

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

Я использую Styled Components v3.4.2 с Gatsby Image v1.0.55. В настоящее время мяч поднимается, когда пользователь наводит на него курсор, но тень не уменьшается. Я, вероятно, неправильно обращаюсь к компоненту GetInTouchShadow. Может быть это как-то связано с махинациями Gatsby Image? Любая помощь приветствуется! :)

Вот мой код ...

const GetInTouchShadow = styled(Img)``;

const GetInTouchBall = styled(Img)`
  &:hover {
    transform: translateY(-11px);
    transition: 0.2s ease-in-out;

    ${GetInTouchShadow} {
      transform: scale(0.8);
    }
  }

  &:not(:hover) {
    transform: translateY(0);
    transition: 0.2s ease-in-out;

    ${GetInTouchShadow} {
      transform: scale(1);
    }
  }
`;