无法读取未定义的属性“地图”-无法从道具读取数组

Question

具有两个组成部分： StyledService-所有ServiceItem组件的父级 ServiceItem-子项，具有标题和元素列表的组件

ServiceItem：

const ServiceItem = ({ heading, items }) => (
    <StyledWrapper>
        <StyledHeader>{heading}</StyledHeader>
        <StyledList>
            {items.map(item => (
                <StyledItem key={item}>{item}</StyledItem>
            ))}
        </StyledList>
    </StyledWrapper>
);

ServiceSection：

const ServiceSection = () => {
    const [services] = useState([
        { heading: 'Development', items: ['Mobile development', 'Web development'] },
        { heading: 'Business', items: ['Marketing', 'SEO'] },
        { heading: 'Design', items: ['UX Design', 'Branding'] },
    ]);

    return (
        <StyledWrapper>
            {services.map(({ heading, items }) => (
                <ServiceItem key={heading} heading={heading} items={items} />
            ))}
        </StyledWrapper>
    );
};

当我运行此浏览器时，请提醒我： 无法读取未定义的属性“地图”。 问题在于ServiceItem组件中的“ items”道具不会将“ items”读为数组，而是数组，所以我不知道问题出在哪里。 “项目”道具是放在ServiceSection组件的服务变量中的“项目”数组。 一小时无法解决此问题。谢谢。

浏览器：

ServiceItem
src/components/atoms/ServiceItem/ServiceItem.js:36
  33 | const ServiceItem = ({ heading, items }) => (
  34 |     <StyledWrapper>
  35 |         <StyledHeader>{heading}</StyledHeader>
> 36 |         <StyledList>
  37 |             {items.map(item => (
  38 |                 <StyledItem key={item}>{item}</StyledItem>
  39 |             ))}