How could it be changed swiper-slides width in each at React?

Question

I want to coding using for Freemode Swiper Library similar with here design imgae on React. but Width is same in Swiper source . I have an difficult about adjusting that size. What can i find solution?

import { FreeMode, Mousewheel, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/pagination";

import "./swiper.css";

const Swipersample = () => {
  return (
    <>
      <Swiper
        slidesPerView={2}
        spaceBetween={0}
        freeMode={true}
        pagination={{
          clickable: true,
        }}
        mousewheel={true}
        modules={[FreeMode, Pagination, Mousewheel]}
        className="mySwiper"
      >
        <SwiperSlide>
          <img src="/img/bol.jpg" alt="section1" />
          <div class="info"></div>
        </SwiperSlide>
        <SwiperSlide>
          <img src="/img/bouldering.webp" alt="section1" />
        </SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
};

export default Swipersample;

enter image description here ( What I want)

enter image description here ( Current situation )

I created an class in this code but it's not a clear solution. The CSS is not work. so I found other code. but, It hasn't what i expect to effect. (pagenation, navigation, scrollbar...)

https://codesandbox.io/s/jovial-payne-z4ct3?file=/src/index.js