React Styled Components Extend

i'm trying to re-use and extend a styled-component with no luck. I suspect i haven't quite grasped how to properly use styled-components

I have a component that renders a chevron icon, based on what icon prop is passed to it. What i want to be able to do is export this component, then import it and extend its styles. ie - in this example remove its padding in Header.jsx:

Chevron.jsx

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

const StyledChevron = styled.i`
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    cursor: pointer;
    border-left: 1px solid #efefef;
    transition: all .1s linear;
    transform: rotate(0deg);
    ${props=>props.closed && ``};
    &:hover {
        background: #f7f4f4;
    }
`

const Chevron = (props) => {

    return (
        <StyledChevron closed={props.item.closed} onClick={()=>{props.openSubMenu(props.item.id)}} className={props.icon}/>
    )

}

export default Chevron

Header.jsx

import React from 'react'
import styled from 'styled-components'
import cssvars from '../../js/style/vars'
import Chevron from './Chevron'

const StyledHeader = styled.div`
    display: flex;
    align-items: center;
    padding: 11px;
    justify-content: space-between;
    background: ${cssvars.primaryColor};
    h2 {
        font-size: 19px;
        color: #fff;
        display: flex;
        align-items: center;
    }
`

const BackChevron = Chevron.extend`
    padding: 0
`

const Header = (props) => {

    return (
        <StyledHeader>
            <h2>{props.item.title}</h2>
            <BackChevron {...props} icon="icon-arrow-left"/>
        </StyledHeader>
    )

}

export default Header

With the above code, im getting console error: Uncaught TypeError: _Chevron2.default.extend is not a function