Styled-components add styles to custom component

Question

I want to add styles to the custom component with a help of the styled-components library. I found some similar questions on StackOverflow with answers but it seems not to work for me. I do something like this:

1. Here is my custom component

const ComponentStyledBox = styled.div`
  color: red;
`;

const ComponentStyled = () => (
  <ComponentStyledBox>Component With StyledComponents</ComponentStyledBox>
);

2. And here I try to use my custom component and add some styles to it

const ComponentStyledWrapper = styled(ComponentStyled)`
  background-color: green;
`;

export default function App() {
  return (
    <div>
      <ComponentStyledWrapper />
    </div>
  );
}

As the result, I don't have a green background. Only red text. The same will be if I use instead of the styled custom component just a component with styles added via CSS in a common way. What do I do wrong?

For your convenience here is a CodeSandbox

Thanks in advance!