Не работает ```props```

Всем привет! Не работет props: при наведении на заголовок h1 цвет не меняется, но если props убрать и оставить hover, то все нормально. Не пойму почему так.

import React from 'react';

import './app-header.scss';
import styled from 'styled-components';

const Header = styled.div`
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    h1 {
        font-size: 26px;
        color: ${props => props.colored ? 'red' : 'black'}
        :hover {
            color: white;
    }
}

    h2 {
        font-size: 1.2rem;
        color: grey;
}
`

const AppHeader = () => {
    return (
        <Header colored>
            <h1>VladislavTheOne</h1>
            <h2>5 записей, из них понравилось 0</h2>
        </Header>
    )
}

export default AppHeader;