我确信有一个快速的解决方法，我在某个地方搞砸了，但是我如何在SwiperjsforReact中使用自定义元素而不是点来分页呢？
自定义元素从图标数组返回SVG。
我最初在TSX中有代码，但为了使事情更容易，我将其转换为JS，但没有运气。它只是不断返回[object Object][object Object][object Object]应该分页的地方。
Here's what I've got so far：

import React from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/pagination";

import "./styles.css";

// import required modules
import { Pagination } from "swiper";

const icons = [
    {
        icon: (
            <svg
                width="86"
                height="87"
                viewBox="0 0 86 87"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <rect x="0.5" y="1.125" width="75" height="75" stroke="#1A1918" />
                <rect x="10.5" y="11.125" width="75" height="75" stroke="#1A1918" />
            </svg>
        ),
    },
    {
        icon: (
            <svg
                width="91"
                height="84"
                viewBox="0 0 91 84"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <rect x="0.5" y="1.125" width="75" height="75" stroke="#1A1918" />
                <path
                    d="M7.36379 83.25L48.5 12L89.6362 83.25H7.36379Z"
                    stroke="#1A1918"
                />
            </svg>
        ),
    },
    {
        icon: (
            <svg
                width="88"
                height="91"
                viewBox="0 0 88 91"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <rect x="0.5" y="1.125" width="75" height="75" stroke="#1A1918" />
                <rect
                    x="8.5"
                    y="11.5"
                    width="79"
                    height="79"
                    rx="39.5"
                    stroke="#1A1918"
                />
            </svg>
        ),
    },
];

const Bullet = ({ bulletIcon, className }) => {
    return <div className={className}>{bulletIcon}</div>;
};

export default function App() {
    const pagination = {
        clickable: true,
        renderBullet: function (index, className) {
            return (
                <Bullet className={className} bulletIcon={icons[index].icon}></Bullet>
            );
        },
    };

    return (
        <>
            <Swiper
                pagination={pagination}
                modules={[Pagination]}
                className="mySwiper"
            >
                <SwiperSlide>Slide 1</SwiperSlide>
                <SwiperSlide>Slide 2</SwiperSlide>
                <SwiperSlide>Slide 3</SwiperSlide>
            </Swiper>
        </>
    );
}

查看文档，我可以看到他们这样做：

renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + "</span>";
    }

我试过不同的版本，但都不成功。