SwiperJS half image half text

I'm trying to make a swiper where half of it displays the image and the other half displays text:

    <div className="container-fluid p-0">
      <div className="row">
        <Swiper
          spaceBetween={30}
          effect={"fade"}
          navigation={true}
          pagination={{
            clickable: true,
          }}
          modules={[EffectFade, Navigation, Pagination]}
          className="mySwiper"
        >
          <SwiperSlide>
            <div className="d-flex">
              <img src={img8} />
              <div className="w-50">
                <h2 className="text-center">{t("medical.title2")}</h2>
                <p className="text-center">{t("medical.par2")}</p>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="d-flex">
              <img src={img6} />
              <div className="w-50">
                <h2 className="text-center">{t("medical.title3")}</h2>
                <p className="text-center">{t("medical.par3")}</p>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="d-flex">
              <img src={img9} />
              <div className="w-50">
                <h2 className="text-center">{t("medical.title4")}</h2>
                <p className="text-center">{t("medical.par4")}</p>
              </div>
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div className="d-flex">
              <img src={img10} />
              <div className="w-50">
                <h2 className="text-center">{t("medical.title5")}</h2>
                <p className="text-center">{t("medical.par5")}</p>
              </div>
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </div>

CSS

.swiper {
  width: 100%;
  height: 100%;
}

.swiper .swiper-slide {
  height: auto;
}

.swiper-slide img {
  display: block;
  width: 50%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
}

This is supposed to work, but when i swipe with the arrow only the image swipes but the div containing h2 and p doesn't swipe and it stands still like a fixed div and if i swipe to the 4th slide the whole text will be above each others

Try something like this. Tested on official demos, so should work. If not, check version of Swiper.

import React, { useRef, useState } from 'react';
// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/effect-fade';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

import './styles.css';

// import required modules
import { EffectFade, Navigation, Pagination } from 'swiper/modules';

export default function App() {
  return (
    <>
      <Swiper
        spaceBetween={30}
        effect={'fade'}
        navigation={true}
        pagination={{
          clickable: true,
        }}
        modules={[EffectFade, Navigation, Pagination]}
        className="mySwiper"
      >
        <SwiperSlide>
        <div className="swiper-slide-content">
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
          <div className="text-content">
              <h2>Title 1</h2>
              <p>Neque porro quisquam  1.</p>
            </div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
        <div className="swiper-slide-content">
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
          <div className="text-content">
              <h2>Title 2</h2>
              <p>Neque porro quisquam  2.</p>
            </div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
        <div className="swiper-slide-content">
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
          <div className="text-content">
              <h2>Title 3</h2>
              <p>Neque porro quisquam  3.</p>
            </div>
          </div>
        </SwiperSlide>
        <SwiperSlide>
        <div className="swiper-slide-content">
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
          <div className="text-content">
              <h2>Title 4</h2>
              <p>Neque porro quisquam  4.</p>
            </div>
          </div>
        </SwiperSlide>
      </Swiper>
    </>
  );
}

CSS

.swiper-container {
  width: 100%;
  height: 100vh;
}

.swiper-slide-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.swiper-slide-content img {
  width: 50%;
  height: 100%;
  object-fit: cover;
  
}

.text-content {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #fff;
}

.swiper-pagination-bullet {
  background: #000;
}

.swiper-button-next,
.swiper-button-prev {
  color: #000;
}