Adjust width Swiper React to screen

Question

I am using Swiper React to creater a Carousel Slider from a map of an object received from an API.

Here is my code :

<div className="border-4">
                <Swiper
                    className='width-carousel'
                    modules={[Navigation]}
                    spaceBetween={40}
                    slidesPerView={2.5}
                    pagination={{ clickable: true }}
                    autoplay={{ delay: 2500, disableOnInteraction: false }}
                >
                    {props.mediaArea.mediaObjects && props.mediaArea.mediaObjects.map((slide, index) => {
                        return (
                            <SwiperSlide key={index}>
                                <img className="rounded-lg shadow-lg p-3 h-96" src={slide.contentUrl ?? "https://dummyimage.com/600x400/000/fff"} alt={slide.title ?? ""} />
                                {slide.title && <p className="font-Montserrat font-semibold mt-8">{slide.title}</p>}
                                {slide.description && <p className="font-Montserrat text-gray-500 text-sm">{slide.description}</p>}
                            </SwiperSlide>
                        )
                    })}
                </Swiper>
            </div >

The problem is : If I set 100% width in my class, the sidebar will be larger than the screen because I have a sidebar of 300px.

If I make calc(100% - 300px), the calculation is not taken in consideration (the size of Swiper still 100%).

I would like it to fit the width of the <section> it is into.

Any help on this ?

PS : I set the container to width : 100%.