Progress Bar styling with styled components - React/TypeScript

Question

I have this code and somehow the only styles that work is only appearance: none; I am following this tutorial: https://blog.campvanilla.com/building-a-progress-bar-component-using-reactjs-styled-components-516dc2c3075a What might be wrong?

import styled from 'styled-components';

type ProgressBarProps = {
    value: number;
    max?: number;
    color?: string;
    width?: string;
}

type ContainerProps = {
    color?: string;
    width?: string;
}

const Container = styled.div<ContainerProps>`
    progress[value] {
        margin-right: 8px;
        width: ${props => props.width};
        -webkit-appearance: none;
        appearance: none;

    
        &::webkit-progress-bar {
            height: 10px;
            border-radius: 20px;
            background-color: #eee;
        }
    
        &::webkit-progress-value {
            height: 10px;
            border-radius: 20px;
            background-color: ${props => props.color};
        }
    }
`


const ProgressBar = ({ value, color, max = 100, width="250px" }: ProgressBarProps) => {
    return (
        <Container color={color} width={width}>
            <progress value={value} max={max}/>
            <span>{value}%</span>
        </Container>
    )
}

export default ProgressBar;