Style Components RC v2 not working properly?

sc-rc-test.jsx

import React from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";

const TeamMember = styled(Link)`
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background-color: #2B2F38;
    padding: 10px;
    font-size: 13px;
    text-decoration: none;
    outline: none;
    text-align: left;
    transition: background-color 0.3s ease-in-out;

    &:hover{
        background-color: #21252B;

        ${MemberAvatar} {
            ${StatusDot} {
                border: 4px solid #21252B;
            }
        }

    }
`;

const MemberAvatar = styled.div`
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
`;

const StatusDot = styled.div`
    position: absolute;
    top: 0px;
    right: -5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 4px solid #2B2F38;
    background-color: ${({ status }) => (status === "Online" ? "#5FB991" : status === "Away" ? "#F18F01" : "#BC6E6B")}
`;

const MemberInfo = styled.div`
    width: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
`;

const MemberName = styled.div`
    width: 100%;
    color: ${({ status }) => (status === "Online" || status === "Away" ? "#ffffff" : "#4B5262")}
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
`;

const LastMessage = styled.div`
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #4B5262;
`;

const TeamMemberElement = ({ member }) => (
  <TeamMember to={`/chat/${member.id}`}>
    <MemberAvatar style={{ backgroundImage: `url(${member.avatar})` }}>
      <StatusDot status={member.status} />
    </MemberAvatar>
    <MemberInfo>
      <MemberName status={member.status}>{member.who}</MemberName>
      <LastMessage>{member.lastMessage}</LastMessage>
    </MemberInfo>
  </TeamMember>
);

export default TeamMemberElement;