我试图在我的页脚呈现图标，但不断得到一个“类型错误：在我的StyledIconsWrapper旁边没有重载匹配此调用”错误。这只是一个问题，因为这会阻止Vercel部署，否则代码会正常工作。
下面是我的代码：

interface StyledIconsProps {
  name: string;
  width: number;
  height: number;
  color: string;
  viewBox: string;
  externalUrl: string;
}

const socials = [
  {
    name: "instagram",
    width: 22,
    height: 22,
    color: "currentColor",
    viewBox: "0 0 32 32",
    externalUrl: "https://www.instagram.com/",
  },
];

export const FooterIcons = (): ReactElement => {
  const { colors } = useTheme();

  return (
    <IconWrapper>
      <IconContainer>
        <Icon name="logoTl_White_L" width={150} height={33} color="currentColor" />
        We build digital shapers.
      </IconContainer>
      <StyledIconsWrapper color={colors.neutrals.white}>
        {socials.map(({ name, width, height, color, viewBox, externalUrl }) => {
          return (
            <StyledIcon
              target="_blank"
              rel="noopener noreferrer"
              href={externalUrl}
              key={name}
              color={color}
            >
              <Icon name={name} width={width} height={height} color={color} viewBox={viewBox} />
            </StyledIcon>
          );
        })}
      </StyledIconsWrapper>
    </IconWrapper>
  );
};

我的StyledIconsWrapper：

const StyledIconsWrapper = styled.div<StyledIconsProps>`
  display: flex;
  flex-direction: row;
  margin-top: 10px;

  & > * {
    color: ${({ color }) => color};
  }
`;

是什么导致了错误？