Javascript 道具未传递给情感中的子组件

我试图用情感来包装现有的组件。它有一个名为

可折叠的属性

import styled from '@emotion/styled';
import { Accordion as ReachAccordion } from '@reach/accordion';
// box is a component which implements the styled system.
import Box from '../Box';

const Container = Box.withComponent(ReachAccordion);

const Accordion = forwardRef((props, ref) => {
  return <Container width="100%" {...props} ref={ref} />
});

export default Accordion;

但是，这会有效地创建同一棵树，其中

可折叠的

不会传递给

容器的子级

我做错了什么？我如何按计划将财产传递给孩子

<Accordion collapsible>
  <Container collapsible>
    <ReachAccordion>

import styled from '@emotion/styled';
import isPropValid from '@emotion/is-prop-valid';
import { createShouldForwardProp, props } from '@styled-system/should-forward-prop';
import { Accordion as ReachAccordion } from '@reach/accordion';

const shouldForwardProp = createShouldForwardProp([...props, 'collapsible']);

const Container = styled(ReachAccordion, {
  shouldForwardProp
})({ /** whatever */ });