Bug: Nested composition causes invalid tag to be rendered

[aloker]

Consider this example:

const C1 = ({ children }) => <div>{children}</div>;
const C2 = styled(C1)({});
const C3 = styled(C2)({});

const App = () => <C3>Test</C3>

That is, styled element C3 extends styled element C2 which by itself extends component C1.

This causes a wrong DOM element to be rendered (notice the c1 tag): <c1 class="C1-2-0-1">Test</c1>

Online example

If I replace C1 with a styled element by itself (const C1 = styled('div')({...})), the generated DOM is correct.

[lttb]

fixed in 2.2.3