盒子阴影不会出现在转盘上方

Question

你好，我想在标题中放一个阴影框，但是由于某种原因，我的轮播不允许我的阴影框出现在div中：

没有我的胡萝卜成分：

代码：

export default function App() {
  var settings = {
    dots: true,
    arrows: false,
    autoplay: true,

    draggable: false,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <div className="App">
      <div
        style={{
          width: "100%",
          position: "relative",
          height: "auto",
          position: "relative",
          boxShadow: " 3px 3px 3px #000",
          background: "green"
        }}
      >
        header
      </div>
  <Slider {...settings}>
    <div>
      <div style={{ background: "blue", height: "200px", width: "100%" }}>
        testing
      </div>
    </div>
  </Slider>
    </div>
  );
}

示例：

https://codesandbox.io/s/flamboyant-allen-nr3t0