Change width of Swiper React

I'm using Swiper with React to create a Carousel of cards.

I setup the test that we can find on Swiper Doc:

Swiper React Usage

which is :

return (
    <Swiper
      spaceBetween={50}
      slidesPerView={3}
      onSlideChange={() => console.log('slide change')}
      onSwiper={(swiper) => console.log(swiper)}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );

The problem is: I have a Sidebar of 300px wide on left side of the screen on every page. Swiper sets the width of the Swiper carousel to width: screen but in my case, it creates a horizontal scroll bar because it takes full width + my sidebar.

I would like it to take full width of the component and not the screen.

Any idea how I can fix this ?