how to target sibling styled component on focus

Just trying to change background-color of an input and a label at the same time on input: focus. but can’t do it. Any help will be appreciated!

const Wrapper = styled.div`
  width: 300px;
`;

const Label = styled.label`
  background-color: black;
`;

const Input = styled.input`
  background-color: grey;

 &:focus ~ ${Label} {
background-color: white;
}

`;

<Wrapper>
    <Label>Some text</Label>
    <Input />
 </Wrapper>

[lukashala]

I have a same issue as @aeciolevy

${StyledInput}:focus ~ & {...} is not working.

But input:focus ~ & {...} is working fine. Strange.

[mxstbr]

Just gotta put the input before the label and it works!

<Wrapper>
      <Input />
      <Label>Some text</Label>
     </Wrapper>

Demo: https://www.webpackbin.com/bins/-Kv7hj0-Erhm1Rvgjwv1