如何使用样式化组件仅为<li>中的活动项添加背景颜色？

import React from 'react';
import styled from 'styled-components';

const StyledListItem = styled.li`
  /* 设置活动项的背景颜色 */
  background-color: ${props => props.isActive ? '#ff0000' : 'transparent'};
`;

const MyComponent = () => {
  const items = [
    { id: 1, text: 'Item 1', isActive: true },
    { id: 2, text: 'Item 2', isActive: false },
    { id: 3, text: 'Item 3', isActive: true },
  ];

  return (
    <ul>
      {items.map(item => (
        <StyledListItem key={item.id} isActive={item.isActive}>
          {item.text}
        </StyledListItem>
      ))}
    </ul>
  );
};