How to reference a styled component to another styled component

Question

I'm trying to change background-color of a styled component, inside another styled-component onHover. I wan't StyledDevider to change background-color when ReferenceInput is hovered. The components are styling antd components. This is my code:

const ReferenceInput = styled(Input)`
  padding: 20px 0;
  line-height: 44px;
  }
`;

const StyledDivider = styled(Divider)`
  border-radius: 5px;

  ${ReferenceInput}:hover & {
    background-color: pink;
  }
`;

Which I find similar to documentation: https://styled-components.com/docs/advanced#referring-to-other-components

But I can't seem to get it to work. Noting happens on hover.

const ProductCardHeader: FC<ProductCardHeaderProps> = (props) => {
  const { product } = props;

  const isActive: string = product.isActive ? 'Aktiv' : 'Inaktiv';

      return (
    <Header>
      <Row align="bottom" justify="space-between" gutter={16}>
        <Col>
          <ProductCardTitle>Reference</ProductCardTitle>
          <Form.Item name="reference" noStyle>
            <ReferenceInput bordered={false} />
          </Form.Item>
        </Col>
        <Col flex="auto" />
        <Col>
          <ToggleBox>
            <Row>
              <Col>
                <OutlinedButtonText>{isActive}</OutlinedButtonText>
              </Col>
              <Col>
                <Form.Item name="isActive" valuePropName="checked" noStyle>
                  <Toggle />
                </Form.Item>
              </Col>
            </Row>
          </ToggleBox>
        </Col>
        <Col>
          <Dropdown overlay={ProductMenu} trigger={['click']} arrow={false}>
            <OutlinedIconButton icon={<StyledMoreIcon />}>
              <OutlinedButtonText>Mere</OutlinedButtonText>
            </OutlinedIconButton>
          </Dropdown>
        </Col>
        <StyledDivider />
          </Row>
        </Header>
  );
};