If condition in hover status in styled-component always takes the "else" value

I've been developing a project using rick and morty api and encountered a strange issue. Basically, I am not able to use "props" correctly in a condition in styled-components; it always takes the value in first "else" even if conditions work correctly (I console.log my conditions and there were no issues; it enters correctly every single one of them)

Let me explain it further...

Here's my isAlive prop to be used in my styled-components file:

<StatusDot isAlive={data.status} />

These are styles belonging to the StatusDot component:

export const StatusDot = styled.span`
    display: inline-block;
    height: .8rem;
    width: .8rem;
    
    background: none;
    border-radius: 50%;

    transition: .8s background ease;
    transition-delay: 0s;
    
    
    ${CharacterCard}:hover & {
        background: ${(props) => (props.isAlive === "Alive" ? "rgb(85, 204, 68)" : "rgb(214, 61, 46)")};
        transition-delay: .8s;
    }
`;

Whenever I hover on CharacterCard, it always takes the RGB code in the else block even if my props.isAlive is "Alive". The same issue happens again when I write a nested if check; it always picks the RGB code in the else block.

This is the nested code I wrote:

background: ${props => props.isAlive === "Alive"
     ? "rgb(85, 204, 68)" : 
     props.isAlive === "Dead" ? "rgb(214, 61, 46)" : "black"};

Any help appreciated.