TS `styled` breaks AddComponentProps

import * as React from 'react';
import styled from 'styled-components';

export type AddComponentProps<Props, Component extends React.ElementType> = Props & {
	component?: Component;
} & Omit<React.ComponentProps<Component>, 'component' | keyof Props>;

// example 1
const TestComponent = <C extends React.ElementType = 'button'>(
	p: AddComponentProps<{ text: number }, C>
) => <span>{p.text}</span>;

const TestComponentStyled = styled(TestComponent)``;

const Component = (p: { compProp1: number }) => <span>{p.compProp1}</span>;

// Problem hehe
export const Test1 = (): JSX.Element => (
	<>
		<TestComponentStyled component={Component} test='1' text={22} /> // typecheck DOES NOT throws error for `test` property
		<TestComponentStyled component={Component} text={22} /> // typecheck DOES NOT throws error for TestComponentStyled's property `compProp1`
	</>
); 

export const Test2 = (): JSX.Element => (
	<>
		<TestComponent component={Component} test='1' text={22} />
		<TestComponent component={Component} text={22} />
	</>
); // typecheck THROWS error for TestComponentStyled's property `compProp1`