我正在做一个Next.js项目，它使用了样式化组件。我有一个数据数组，我Map到呈现子组件。我的子组件需要一个isActive prop，我从父组件传递它。当传递isActive时，所有样式化组件返回所有子组件的活动状态，而不是仅返回活动组件。
我的父组件如下所示。我已经硬编码了第一个要激活的项目作为测试。我已经用调试器验证了只有第一项将isActive设置为true：

{reviews.map((review, index) => (
  <ReviewItem
    key={review.name}
    review={review}
    isActive={index === 0}
  />
))}

我的子组件看起来像这样：

<ReviewItemContainer $isActive={isActive}>
  ...
</ReviewItemContainer>

样式化的组件如下所示。background-color只是一个测试属性：

export const ReviewItemContainer = styled.div<{ $isActive: boolean }>`
  ${$isActive => ($isActive ? 'background-color: black;' : '')}
`;

我希望只有设置为isActive的项应该获得黑色背景色。但是，我的所有子组件都是这样，即使是带有isActive === false的子组件也是如此。
谢谢你能提供的任何帮助。这是我第一次在任何真实的的能力中使用样式化组件，所以我可能只是错过了一些东西。