boxShadow does not affect SwiperSlide's individually

[mHaines9219]

tried with MUI sx prop as well as vanilla css

boxShadow seems to affect the swiper carousel as a whole, creating these unwanted bleed areas (yellow arrows)

is this a bug or am i doing something wrong?

 <SwiperSlide key={idx}>
      <Box
        className="hero-carousel-slide"
        sx={{
          // ...getGlassEffect(theme)
          // ,
          width: '50vw',
          height: {
            xs: '70vw',
            sm: '400px',
            md: '500px',
            lg: '600px',
          },
          borderRadius: '15px',
          border: '1px solid #00ccff',
          backgroundColor: 'rgba(0, 0, 0, 0.9)',
          boxShadow: '0 0 20px rgba(0, 204, 255, 0.9)',
          overflow: 'hidden',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }