I'm designing an input component, with a border on a div wrapping the input, and a label that is a sibling of the input. I want to have the color of the border and the label change when the input is focused.

The problem is: I have two of my component side by side, and when I focus on one, the color of both labels changes! The borders don't have this problem, by the way, just the labels.

const S = {
  Wrapper: styled.div`
    position: relative;
    border: solid 1px ${theme.colors.lightGrey};

    :hover {
      border-color: ${theme.colors.white};
    }

    :focus-within {
      border-color: ${theme.colors.draftedBlue};
    }
  `,
  Input: styled.input` /* omitted */ `,
  InputLabel: styled.label`
    position: absolute;
    top: -8px;
    left: 8px;

    input:focus + & {
      color: ${theme.colors.draftedBlue};
    }
  `,
};

const SDCurvedInput = ({ ...props }) => (
  <S.Wrapper className={props.className}>
    <S.InputLabel htmlFor={props.label}>{props.label}</S.InputLabel>
    <S.InputWrapper>
      <S.Input {...props} onChange={e => props.onChange(e.target.value)} />
    </S.InputWrapper>
  </S.Wrapper>
);

const Inputs = () => {
  const { entryFee, payout, setEntryFee } = useSlip();

  const clearIfZero = () => {
    if (!parseInt(entryFee)) setEntryFee("");
  };
  const resetToZeroIfBlank = () => {
    if (!entryFee) setEntryFee(0);
  };

  return (
    <S.Wrapper>
      <SDCurvedInput
        label="Entry Fee"
        type="number"
        value={entryFee}
        onChange={v => setEntryFee(parseInt(v))}
        onFocus={clearIfZero}
        onBlur={resetToZeroIfBlank}
      />
      <SDCurvedInput label="Payout" value={payout || 0} readOnly />
    </S.Wrapper>
  );
};

Help!