使用Gatsby Image时引用另一个样式化的组件

Question

这就是我想要做的。我的圆圈下面有一个阴影，看起来像这样……

...当前，当用户将鼠标悬停在橙色球上方时，它会上升，但我也希望下面的阴影稍微缩小一点。然后，当用户将鼠标从球上滑下时，随着球向后放低，阴影应回到其正常大小。

我正在使用带盖茨比图像v1.0.55的样式化组件v3.4.2。当前，当用户将鼠标悬停在球上方时，球正在上升，但是阴影根本没有缩小。我大概不是正确地引用GetInTouchShadow组件。这可能与盖茨比影像的外包装恶作剧有关吗？任何帮助将非常感激！ ：）

这是我的代码...

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);
    }
  }
`;