тень от коробки не появляется над каруселью

Question

Привет, я пытаюсь поместить boxshadow в мой заголовок, но по какой-то причине моя карусель не позволяет моему shadow box даже появляться в 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