I have a component that uses a styled component as a wrapper:

const StyledContainer = styled.div`
  margin: 20px;
`;

then I have a React component:

interface ContainerProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
  as?: WebTarget; // not sure about the type here
}


export const Container = ({
  children,
  as,
}: PropsWithChildren<ContainerProps>) => (
  <StyledContainer as={as}>
    {children}
  </StyledContainer>
);

then whenever I would like to use the as prop I get the error.

<Container
  as={Badge}
  badgeLabel="Pending"
/>

Property ‘badgeLabel’ does not exist on type ‘IntrinsicAttributes &
ContainerProps & { children?: ReactNode; }’

NOTE: I know I could do <StyledContainer as={Badge} ... /> but that’s out of the question in my codebase due to some other functionalities that will become part of this work.