Как расширить стили импортированного кастомного компонента в реакте?

Всем привет! Использую библиотеку styled-components Пытаюсь расширить стили импортированного компонента. Ошибок нет и если я сделаю console.log то можно найти сами стили в componentStyle.rules, но сами стили не применяются. Не могу понять по какой причине

ErrorModel.js файл в котором я расширяю стили

import React from 'react'
import styled from 'styled-components'
import Button from './Button'
import Card from './Card'

const ModalWrapperStyled = styled(Card)`
        position: fixed;
        top: 30vh;
        left: 10%;
        width: 80%;
        z-index: 100;
        overflow: hidden;
    const ModalWrapper = (props) => {
    console.log(ModalWrapperStyled)
    return (
        <ModalWrapperStyled>
            <header>
                <h2>Title</h2>
            </header>
            <div>
                <p>Error Message</p>
            </div>
            <footer>
                <Button>Okay</Button>
            </footer>
        </ModalWrapperStyled>
    )
}

export default ModalWrapper

Card.js импортируемый компонент

import React from 'react'
import styled from 'styled-components'

const CardWrapper = styled.div`
    background-color: #FFF;
    border-radius: 10px;
`
const Card = (props) => {
    return (
        <CardWrapper>
            {props.children}
        </CardWrapper>
    )
}

export default Card

Заранее спасибо!