Swiper.js Можете ли вы добавить текст к эффекту куба в React.js

Question

В React.js есть ли способ добавить текст поверх изображений к эффекту куба Swiper.js?

Пытался, но пока ничего не работает.

Вот мой код:

       import React, { useState, useEffect } from "react";
import img1 from "./Assets/pics/shopNow/01.jpeg";
import img2 from "./Assets/pics/shopNow/02.jpeg";
import img3 from "./Assets/pics/shopNow/03.jpeg";
import img4 from "./Assets/pics/shopNow/04.jpeg";

const MyParentComponent = () => {
      const nextSwiper = () => {
        return (
          <>
            <Swiper
              style={{
                width: "300px",
                height: "300px",
                left: "50%",
                top: "50%",
                margin: 0,
                padding: 0,
                backgroundColor: "#fff",
                position: "absolute",
                marginLeft: "-150px",
                marginTop: "-150px",
              }}
              slidesPerView={1}
              navigation
              effect={"cube"}
              grabCursor={true}
              cubeEffect={{
                shadow: true,
                slideShadows: true,
                shadowOffset: 20,
                shadowScale: 0.94,
              }}
              pagination={{ clickable: true }}
              scrollbar={{ draggable: true }}
              onSwiper={(swiper) => console.log(swiper)}
              onSlideChange={() => console.log("slide change")}
            >
              <SwiperSlide
                style={{ backgroundPosition: "center", backgroundSize: "cover" }}
              >
                <div style={{position: "relative"}}>
                <img style={{ height: "300px", width: "300px" }} src={img1} />
                <p style={{position: 'absolute'}}>T-shirts</p>
                </div>
              </SwiperSlide>
              <SwiperSlide
                style={{ backgroundPosition: "center", backgroundSize: "cover" }}
              >
                <img style={{ height: "300px", width: "300px" }} src={img2} />
              </SwiperSlide>
              <SwiperSlide
                style={{ backgroundPosition: "center", backgroundSize: "cover" }}
              >
                <img style={{ height: "300px", width: "300px" }} src={`${img3}`} />
              </SwiperSlide>
              <SwiperSlide
                style={{ backgroundPosition: "center", backgroundSize: "cover" }}
              >
                <img style={{ height: "300px", width: "300px" }} src={img4} />
              </SwiperSlide>
            </Swiper>
          </>
        );
      };

    return(
        <>
            {nextSwiper()}
        </>

Несмотря на это, текст "Футболки" не появляется.

Вы знаете, можно ли это сделать?

Я просмотрел другие демоверсии, но не нашел выхода.