How to change bg color of parent element when radiobutton is checked Styled component

When user clicks on radio button the label color must change it color. Tried to use ${Label} inside RadioBtn, so that when the radio button is checked it should change the background color of parent Label component. So I tried with +, ~ added before or after the checked, but completely confused.

    <Label>
        <RadioBtn type="radio" />
        {item}
    </Label>

    import styled from 'styled-components';

    export const Label = styled.label`
        display: flex;
        align-items: center;
    `;

    export const RadioBtn = styled.input`
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin: 0px 20px 0px 14px;
        outline: none;
        border: 1px solid #FF871C;
        &:hover {
            background: grey;
            &::after {
                content: "";
                display: block;
                border-radius: 50%;
                margin: 4px;
                width: 10px;
                height: 10px;
                background: white;
            }   
        }
        &:checked {
            background: #FFC542;
            border: 1px solid #FFC542;
            border: 1px solid green;
            &::after {
                content: "";
                display: block;
                border-radius: 50%;
                margin: 4px;
                width: 10px;
                height: 10px;
                background: white;
            }
        }
    `;