Swiper js move the navigation icons out of the container

Question

Here the swiper navigation icon is inside the container. But I need outside. The margin padding doesn't do the trick. I'm using React. My Codes:

  <div className="container">
      <Swiper
        navigation={true}
        modules={[Navigation]}
        className="mySwiper"
        slidesPerView={4}
        spaceBetween={30}
        pagination={{
          clickable: true,
        }}
      >
        <SwiperSlide>
          <img
            className="image-gallery-section"
            src="https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg"
            alt="swiper"
          />
        </SwiperSlide>
        <SwiperSlide>
          <img
            className="image-gallery-section"
            src="https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg"
            alt="swiper"
          />
        </SwiperSlide>
        <SwiperSlide>
          <img
            className="image-gallery-section"
            src="https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg"
            alt="swiper"
          />
        </SwiperSlide>
        <SwiperSlide>
          <img
            className="image-gallery-section"
            src="https://www.slntechnologies.com/wp-content/uploads/2017/08/ef3-placeholder-image.jpg"
            alt="swiper"
          />
        </SwiperSlide>
      </Swiper>
    </div>

I want something like that.