Unable to extend react component in styled-component

Question

I am trying to extent react component in styled-component and trying to add custom style on extended component but unable to see the style changes that I am applying

I have created a button component in /src/newbutton.js with following code

import styled from "styled-components";

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

export const NewButton = ({ className, children }) => {
    return (
        <Button primary>Primary</Button>
    )
}

And extending and creating another button component with custom style in /src/custom-button.js with following code

import styled from "styled-components";
import { NewButton } from './button'

const ButtonWrapper = styled(NewButton)`
  width: 100%;
  color: red
`;

const ExtendedButton = ({ className, children }) => {
    return (
        <ButtonWrapper />
    )
}

I have added the custom style like width: 100% & color: red but it is not applying on ExtendedButton. Infect colour and width is same as NewButton

Answer 1

I am posting the complete working code for future reference based on @Flat Globe solution. And it is working fine as expected.

I have modified the Button component code just by adding className in /src/newbutton.js with following code

import styled from "styled-components";

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

export const NewButton = ({ className, children }) => {
    return (
        <Button primary className={className}>Primary</Button>
    )
}

I have also modified the extended-button code by just passing the className in /src/custom-button.js. check the full code below

import styled from "styled-components";
import { NewButton } from './button'

const ButtonWrapper = styled(NewButton)`
  width: 100%;
  color: red
`;

const ExtendedButton = ({ className, children }) => {
    return (
        <ButtonWrapper className="extended-button"/>
    )
}