How to change previous sibling component's CSS in styled-components?

Question

import styled from 'styled-components';

const Wrapper = styled.div`
    // ...
`;

const Input = styled.input`
    // ...
`;

const Button = styled.button`
    // ...
    ${Input}:focus & {
        background-color: red;
    }
`;
export function Foo() {
    return (
        <Wrapper>
            <Button />
            <Input />
        </Wrapper>
    );
}

I expected clicking Input component makes Button component's background-color change. But this code doesn't change anything.

I want to know how to change Button component's CSS when I click Input component.