Темный режим в условиях в Twin.Macro / Tailwind CSS

Question

я использую twin.macro + styled-components: У меня есть компонент ввода, почти такой же, как описано в документации (последний пример под заголовком «Стилизованные компоненты»), за тем исключением, что я также использую темный режим:

      const StyledInput = styled.input`
    color: black;

    ${({ hasBorder }) => hasBorder && tw`border border-purple-500 dark:(border-2 border-black)`}
`;

Однако, как видите, я меняю стиль границы в зависимости от того, находимся мы в темном режиме или нет. Для этого я использую темный режим Twin / Macros / Tailwinds. class особенность.

Он работает с простыми компонентами, но, похоже, не работает для меня, когда я нахожусь в условном выражении (например, здесь внутри hasBorder условие)

Когда я это сделаю:

      <StyledInput hasBorder />
<StyledInput />
<StyledInput />

Я ожидаю, что первый вход будет иметь толстую черную рамку, а остальные - тонкую фиолетовую рамку. Однако теперь все мои входы имеют жирную черную рамку:

И даже когда я явно установил для него значение false (например, <StyledInput hasBorder={false} />), это не работает.

Это ошибка или я упустил что-то важное?