styled-components - предотвратить распространение данных теста на элемент?

Question

У меня есть стилизованный компонент, для которого я установил атрибут data-test.Когда компонент выполняет рендеринг, атрибут data-test также появляется на дочерних элементах.Как предотвратить распространение этого на дочерние элементы?

const HeaderButton = styled(Button)`
    padding: ${remAuto(1)};
`;

const foo = () => <HeaderButton data-test="header-button" />;

Результирующий источник:

<HeaderButton data-test="header-button">                                                                                    
  <Button className="pane-header__HeaderButton-sc-1m834wj-6 iYyjTf" data-test="header-button">                                                                                      
    <button__StyledButton className="pane-header__HeaderButton-sc-1m834wj-6 iYyjTf" data-test="header-button">                                                                                        
      <button__BaseButton className="pane-header__HeaderButton-sc-1m834wj-6 iYyjTf button__StyledButton-i7xkwa-1 data-test="header-button">                                                                                          
        <button className="pane-header__HeaderButton-sc-1m834wj-6 iYyjTf button__StyledButton-i7xkwa-1 jxgniU button__BaseButton-i7xkwa-0 jfiieO" data-test="header-button" />
        </button>
      </button__BaseButton>
    </button__StyledButton>
  </Button>
</HeaderButton>