Semanti c UI липкое вторичное меню с фиксированным верхним меню

Question

У меня есть такой макет codepen

Могу ли я получить зеленую ручку вторичного меню под черным меню, которое прикреплено к верхней части страницы? Я получаю зеленое меню, чтобы придерживаться верхней части страницы, но не ниже черного меню. Если я установлю значение смещения на Sticky-теге с высотой черного меню, я получу странное поведение.

<Sticky context={this.contextRef} offset={61}>

Чёрное верхнее фиксированное меню

const FixedNav = ({ children }) => (
  <Menu fixed='top' color='blue' inverted >
    <div ref={this.contextRef} />
    <Container>
      <Menu.Item>
        <Image size='mini' src='https://semantic-ui.com/images/logo.png' style={{ marginRight: '1.5em' }} />
        My Vineyards
      </Menu.Item>
      <Menu.Item position='right'>
        <Button as='a' inverted>
          Log-in
        </Button>
        <Button as='a' inverted style={{ marginLeft: '0.5em' }}>
          Sign-up
        </Button>
      </Menu.Item>
    </Container>
  </Menu>
)

Зеленое липкое меню

const StickyNav = ({ children }) => (
  <Sticky context={this.contextRef}  >
    <Menu color={'green'} inverted >
      <Container style={{'align-items': 'center', 'justify-content': 'center'}}>
        <Menu.Item as='a'>Introduction</Menu.Item>
        <Menu.Item as='a'>Vineyards</Menu.Item>
        <Menu.Item as='a'>Marketplace</Menu.Item>
        <Menu.Item as='a'>Tripadvisor</Menu.Item>
      </Container>
    </Menu>
  </Sticky>
)

Мой Реф неверен или я неправильно понял Sticky-tag?

Я хочу это:

Не это: