Javascript 如何在zIndex ed组件上出现过渡-反应，反应弹簧

我在

render

中为

React组件使用
Transition
。但是，如果已设置动画的组件需要处理任何zIndex，它们将在项目后面使用zIndex设置动画，直到动画完成，然后弹出到其设置的zIndex。我怎样才能让他们在前面做动画

我尝试在转换时使用立即属性：

immediate={(key) => {
  return key === 'zIndex'
}

但那没有任何效果

下面是正在发生的事情的gif：

如果我将其他组件的zIndex更新为零，我就可以让它工作——但我的代码中没有zIndex，我无法绕过它们。但下面是一个示例，说明了如果它正常工作，它应该是什么样子：


下面是我的更多代码。
import React, { Component } from 'react'
import { Transition, animated } from 'react-spring/renderprops'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = { show: false }
  }

  handleMenuButtonPress = () => {
    this.setState({show: true})
  }
  
  render() }
    return (
      <div>
        <ContentModal>
          <button onClick={this.handleMenuButtonPress}>Button</button>
        </ContentModal>
        <Transition
          native
          items={this.state.show}
          from={{ zIndex: 5, opacity: 0 }}
          enter={{ zIndex: 5, opacity: 1 }}
          leave={{ zIndex: 5, opacity: 0 }}
          config={{ duration: 2000 }}
        >
          {(show) =>
            show &&
            ((props) => (
              <div>
                <animated.div style={props}>
                  <div
                    style={{
                      backgroundColor: 'red',
                      zIndex: 5,
                      position: 'absolute',
                    }}
                  >
                    cat
                  </div>
                </animated.div>
              </div>
            ))
          }
        </Transition>
      </div>
    )
  }
}

const ContentModal = (props) => {
return (
    <div>
      <div className="secondary-modal-blackout-background"></div>
      <div className="secondary-modal">
        <div className="pt-4">
          <div>{props.children}</div>
        </div>
      </div>
    </div>
  )
}

.primary-modal-blackout-background {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  z-index: 1;
  background: black;
  display: block;
  top: 0;
  left: 0;
  right: 0;
}
.primary-modal-body {
  min-width: 700px;
  width: 1200px;
  position: absolute;
  padding: 4px;
  height: 855px;
  z-index: 2;
  opacity: 1;
  background: #f4f4f4;
  color: black;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 25px;
  border-radius: 10px;
}