Использование React Burger Menu с GatsbyJs

Question

Я пытаюсь импортировать компонент, чтобы использовать его с GatsbyJs и заставил его работать до определенной точки, но другие "эффекты", кроме слайда, не работают, и нет сообщения об ошибке, такжеЯ использую Styled Components .

Вот мой код, честно говоря, я не знаю, является ли это проблемой React-burge-menu или GatsbyJs.

Сначала компонент, я должен обернуть его в стиле div, чтобы он работал , как упомянуто здесь

sidebar.js

import React from 'react'
import { scaleDown as BurgerMenu } from 'react-burger-menu'
import styled from 'styled-components'
import { Link } from 'gatsby'
import MenuLogo from '../assets/logos/letterlogo.png'

const StyledBurgerMenu = styled.div`
.bm-item {
    text-align:center;  
    display: inline-block;
    text-decoration: none;
    margin-bottom: 5vh;
    color: #d1d1d1;
    transition: color 0.2s;
}
.bm-item:hover {
    color: white;
}
.bm-burger-button {
    position: fixed;
    width: 30px;
    height: 15px;
    right: 2vw;
    top: 2vh;
}
.bm-burger-bars {
    background: #373a47;
}
.bm-cross-button {
    height: 30px;
    width: 15px;
}
.bm-cross {
    background: #bdc3c7;
}
.bm-menu {
    background: rgba(0, 0, 0, 0.3);
    padding: 2.5em 1.5em 0;
    font-size: 2em;
}
.bm-morph-shape {
    fill: #373a47;
}
.bm-item-list {
    color: #b8b7ad;
}

.bm-overlay {
    background: rgba(0, 0, 0, 0.3);
}
`

const Logo = styled.img`
width: 30vw;
display: block;
margin: auto;
`

export default () => (
  <StyledBurgerMenu>
    <BurgerMenu width='50%'>
      <Logo src={MenuLogo} />
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
      <Link to='/'>Testing</Link>
    </BurgerMenu>
  </StyledBurgerMenu>
)

Затем я называю это макетом, здесь я создал оба внешний контейнер и перенос страницы

layout.js

import React from 'react'
import "normalize.css"
import styled from "styled-components"
import SideBar from "./sidebar"

const MainWrap = styled.div`
    height: 100vh;
    overflow: auto;
`;
const PageWrap = styled.div`
    text-align: center;
    overflow: auto;
    height: 100vh;
`;

export default ({children}) => (
  <MainWrap>
    <SideBar pageWrapId={"PageWrap"} outerContainerId={"MainWrap"}/>
    <PageWrap>
      {children}
    </PageWrap>
  </MainWrap>
)

Также попытался добавить идентификатор напрямую:

export default ({children}) => (
  <MainWrap id={"outer-container"}>
    <SideBar pageWrapId={"page-wrap"} outerContainerId={"outer-container"}/>
    <PageWrap id={"page-wrap"}>
      {children}
    </PageWrap>
  </MainWrap>
)

В обоих случаях это работает, но только анимация слайдов, также явызов этого макета для индексного файла, который имеет этот код:

index.js

import React from 'react'
import Layout from '../components/layout'
import { StaticQuery, graphql } from 'gatsby'
import styled from 'styled-components'
import { FaFacebook, FaInstagram, FaYoutubeSquare, FaTwitterSquare } from 'react-icons/fa'

const Hero = styled.div`
    margin-top: 20vh;
    `
const SocialLinks = styled.div`
    margin-top: 5vh;
    a{
        display: inline-block;
        margin: 1vw;
    }
`;
export default () => (
  <StaticQuery
    query={graphql`
      query HeadingQuery {
        site {
          siteMetadata {
            title
            description
            fb
            twitter
            youtube
            instagram
          }
        }
      }
    `}
    render={data => (
      <Layout>
        <Hero>
          <h1>{data.site.siteMetadata.title}</h1>
          <h2>{data.site.siteMetadata.description}</h2>
        </Hero>
        <SocialLinks>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.fb}><FaFacebook size={50} color="black"/></a>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.youtube}><FaYoutubeSquare size={50} color="black"/></a>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.twitter}><FaTwitterSquare size={50} color="black"/></a>
            <a target="_blank" rel="noopener noreferrer" href={data.site.siteMetadata.instagram}><FaInstagram size={50} color="black"/></a>
        </SocialLinks>
      </Layout>
        )}
    />
)

Вот живой пример сборкис этим кодом, как вы увидите, яэто работает, но это не уменьшает. Демо

Надеюсь, вы можете указать мне правильное направление.

Заранее спасибо