反应弹簧过渡不动画进入状态

我正在使用接收子元素和布尔值的react spring制作折叠组件 collapsed 支柱。 这是相当基本的,但出于某种原因,当安装孩子时,动画不会运行,同时保持动画效果良好。

这是组件的外观

const baseStyles = {
  overflow: "hidden"
};
const openStyles = {
  height: "auto"
};
const collapsedStyles = {
  height: 0
};
const animationConfig = {
  duration: 1000
};
const Collapse = ({ collapsed, children, ...props }) => {
  return (
    <Transition
      items={collapsed}
      native
      config={animationConfig}
      from={baseStyles}
      enter={openStyles}
      leave={collapsedStyles}
      // onFrame={console.log}
      {...props}
    >
      {collapsed => !collapsed
          ? style => <animated.div style={style} children={children} />
          : null
      }
    </Transition>
  );
};

这是工作代码 https://codesandbox.io/s/459p84ky4 我是在做错事,还是在反作用弹簧中出了问题?