How to use component prop with custom components based on Material UI (with emotion)?

Question

I am currently using a solution from the Storybook team to use an alternative to attrs() function from styled-components with Emotion.

This also works very well:

export const Paragraph = styled((props: Omit<React.ComponentProps<typeof Typography>, "variant">) => (
    <Typography variant="body1" {...props} />
))`
    margin: 12px 0;
    padding-right: 24px;
`;

But if I use the styled() function from mui, I get a TypeScript error when I set the components prop. It is doocumented in the MUI Docs.

TS2769: No overload matches this call.

Property 'component' does not exist on type 'IntrinsicAttributes & SystemProps<Theme> & { align?: "left" | "right" | "center" | "inherit" | "justify" | undefined; children?: ReactNode; classes?: Partial<TypographyClasses> | undefined; gutterBottom?: boolean | undefined; noWrap?: boolean | undefined; paragraph?: boolean | undefined; sx?: SxProps<Theme> | undefined; variant?: OverridableStringUnion<Variant | "inherit", TypographyPropsVariantOverrides> | undefined; variantMapping?: Partial<Record<OverridableStringUnion<Variant | "inherit", TypographyPropsVariantOverrides>, string>> | undefined; } & CommonProps & Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<HTMLSpanElement>> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined; }, "children" | keyof CommonProps | "sx" | "variant" | "align" | StandardSystemKeys | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">'.

const Header = styled(
    (props: Omit<React.ComponentProps<typeof ListSubheader>, "component" | "disableGutters" | "disableSticky'">) => (
        <ListSubheader component="div" disableGutters disableSticky {...props} />
    ),
)`
    line-height: 1em;
    color: black;
`;

The only solution at the moment is not to use typing, but I would like to avoid that:

const Header = styled(
    (props) => <ListSubheader component="div" disableGutters disableSticky {...props} />
)`
    line-height: 1em;
    color: black;
`;

Does anyone here have an idea for a solution in my case?