How to properly map Css classes in Styled Components

I am trying to make a similar card as this one https://uiverse.io/joe-watson-sbf/little-goat-24. I am trying to do it with styled component but cannot figure out how to use ".flip-card-front" and ".flip-card-back" classes in styled-components.

<FlipCard>
    <FlipCardInner>
        <FlipCardFront>
            <FlipCardTitle>
                <p>Flip Card</p>
            </FlipCardTitle>
            <p>Hover Me</p>
        </FlipCardFront>
        <FlipCardBack>
            <FlipCardTitle>
                <p>Back</p>
            </FlipCardTitle>
            <p>Leave Me</p>
        </FlipCardBack>
    </FlipCardInner>
</FlipCard>

Above is my card component.

export const FlipCardInner= styled.div`
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
`

export const FlipCardTitle= styled.p`
    font-size: 1.5em;
    font-weight: 900;
    text-align: center;
    margin: 0;
`

export const FlipCard= styled.div`
    background-color: transparent;
    width: 190px;
    height: 254px;
    perspective: 1000px;
    &:hover, ${FlipCardInner}{
        transform: rotateY(180deg);
    }

`

export const FlipCardFront= styled.div`
    box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid coral;
    border-radius: 1rem;
    &{
        background: linear-gradient(120deg, bisque 60%, rgb(255, 231, 222) 88%,
        rgb(255, 211, 195) 40%, rgba(255, 127, 80, 0.603) 48%);
        color: coral;
    }
`

export const FlipCardBack= styled.div`
    box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid coral;
    border-radius: 1rem;
    &{
        background: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
        bisque 40%, rgb(255, 185, 160) 78%);
        color: white;
        transform: rotateY(180deg);
    }
`

Above is my styled component file.

My card renders as shown above.

And after I hover it, it flips like this. I can't figure out how to correct it.

Any help would be appreciated. Thank You

Solution

There's a , in your FlipCard style that shouldn't be there. It should be &:hover ${FlipCardInner} { and not &:hover, ${FlipCardInner} {.

Here is a working version with the fix in line 41: https://codepen.io/rabakilgur/pen/qBMayaV?editors=1010