Usage of withAsyncFonts with styled-components and semantic-ui-react

Tab.jsx

const StyledTab = styled(({ baseFont, headingFont, textFont, iconsFont, ...rest }) => <SemanticTab {...rest} />)`
  &&& .tabular.menu {
    display: flex;
    font-family: ${props => props.baseFont.styles.fontFamily};

    &>.item {
      display: inline-block;
      font-weight: normal;
      text-align: center;
      flex-grow: 1;
      flex-basis: 0;
      color: ${colors.menus.tab.color};
      padding: 1.375rem 1rem;
      background: ${colors.menus.tab.inactive.background};
      border-radius: 0 !important;

      &.active {
        border-top: 4px solid ${colors.menus.tab.border};
        background: ${colors.menus.tab.active.background};
      }
    }
  }
`;

const StyledTabWithAsyncFonts = withAsyncFonts(fonts)(StyledTab);