react-burgers库和Gatsby的问题

Question

我正在尝试使用React-burgers库，但该库无法与Gatsby一起使用，文档似乎简单明了

import { Slider } from 'react-burgers'

...

<Slider />

，当您希望汉堡包处于活动状态时，请将活动道具设置为true

import { Slider } from 'react-burgers'

...

<Slider
   active={true} />

当我这样做时，尽管汉堡包菜单仍处于非活动状态（显示的是汉堡包而不是X）

这是我的代码：

<header
        style={{ backgroundColor: '#111' }}
        className="event-invite-header"
      >
        <Slider
          onClick={() => console.log('clicked')}
          active={true}
          color={menuOpen ? 'rgb(199, 221, 170)' : 'black'}
          className="hamburger"
        />
      </header>

所有其他道具都在工作，只是活动的道具什么也没做。关于我在做什么错的任何想法吗？