Всем добрый вечер! Следующая проблема: использую styled-components + react + ts

Есть вот такой компонент

export const Title: React.FC<PTTypographyUI> = ({ children, ...props }) => {
console.log('Title props', props);
return (
// eslint-disable-next-line react/jsx-props-no-spreading
<TypographySd {...props} component="div" variant="h1">
{children}
</TypographySd>
);
};

const TypographySd = styled(Root)`
${FontMixinUI.CirceNormal}
font-size: 72px;
line-height: 68px;
`;


в пропсах следующее
props={
$c: "red"
$db: true
$mt: "100px"
}

Как говорит стайлед, что это переменные временного окружения, вроде бы, обозначаются долором и их не будет в dom дереве


Далее проваливаемся глубже

export const Root: React.FC<PTTypographyUI> = ({
children,
component,
variant,
className,
...props
}) => {
console.log('props', variant, props);
return (
<TypographySd
{...(variant ? { variant } : {})}
{...(component ? { component } : {})}
className={className}
{...props}
>
{children}
</TypographySd>
);
};

const TypographySd = styled(Typography).attrs((props) => ({ ...props }))`
color: var(--text-primary);
${StyledMixinUI}
`;


И здесь пропсы props = {}

Почему??? Уже часа 1.5 сижу. Я же не в дом прокидываю, а в компонент реакта. Почему нету пропсов?? КТо сталкивался помогите плз

Куда глубже не понял