Unable to change label on input:checked - styled-components

Question

I'm attempting to follow this example (https://codesandbox.io/s/oYQ21A4wz) in a larger form and am really struggling to figure out how to change the label of the input on a :checked state for a styled-component in React. I'm using the 4.2 of styled-components. Any help would be GREATLY appreciated as I've been staring at this for a couple days.
I'm able to get the parent selectors working in other cases (eg: hover) but for some reason I cannot seem to target the Label from its child.
const CheckBoxDoors = props => {
const Label = styled.label`
display: inline-block;
background: rgba(255, 255, 255, 0.9);
border: 2px solid rgba(139, 139, 139, 0.3);
color: #adadad;
border-radius: 25px;
padding: 1px 4px;
margin: 1px;
white-space: nowrap;
`;
const Input = styled.input`
&:checked + ${Label} {
background: blue;
}
`;
return (
<div className="form-group, checkbox">
<CheckboxContainer>
<CheckboxTitle>{props.title}</CheckboxTitle>
<CheckboxGroup>
{props.options.map(option => {
return (
<Label key={option} className="checkbox-inline">
<Input
id={props.value}
name={props.name}
onChange={props.handleChange}
value={props.name + ' ' + option}
checked={
props.selectedOptions.indexOf(props.name + ' ' + option) >
-1
}
type="checkbox"
/>
{option}
</Label>
);
})}
</CheckboxGroup>
</CheckboxContainer>
</div>
);
};

Answer 1

Check this one out:
const Input = styled.input`
&:checked + ${Label} {
background: blue;
}
`;
This rule &:checked + ${Label} means 'when I am checked, the sibling Label component right below me will have these styles'; i.e
<>
<Input id={id}... />
<Label htmlFor={id}... />
</>
However, your component structure looks like this:
<Label>
<Input ... />
</Label>
You'd have to change it to the structure mentioned above.
Also note that you shouldn't declare your styled components inside another component, it'll hurt performance badly. Instead, you should do:
const Input = styled.input` ... `
const Label = styled.label` ... `
const CheckBoxDoors = props => ...