Use React Components instead of pagination dots in Swiperjs, error [object Object] – Reactjs

I’m sure there is a quick fix, and I’m messing up somewhere, but how do I use custom elements instead of dots for pagination in Swiperjs for React?

The custom element returns an SVG from an icons array.

I originally had the code in TSX but converted it to js to make things easier, but no luck. It just keeps returning [object Object][object Object][object Object] where the pagination should be.

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>
        </>
    );
}

Looking at the docs I can see they do this:

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

I’ve tried different variations of this but with no luck.