React(tsx)でSwiper Elementのcontroller-controlやthumbsが使えない

Swiper APIが非推奨になってSwiperElementを使えとのことだったが、
タイトルの解決策が調べても出てこなかったので、一応殴り書きメモ

結論

WebComponentはclassNameがclassNameとしてそのまま出力されちゃうのが問題っぽい。

swiper.d.ts

// https://github.com/nolimits4web/swiper/issues/6466

import React from "react";
import type { SwiperSlideProps, SwiperProps } from "swiper/react";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      // classNameだとthumbやcontrollが使えないためclassを使うようにする
      "swiper-container": React.DetailedHTMLProps<
        Omit<React.HTMLAttributes<HTMLElement>, "className"> &
          SwiperProps & { class?: string },
        HTMLElement
      >;
      "swiper-slide": React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLElement> & SwiperSlideProps,
        HTMLElement
      >;
    }
  }
}

解説

まずtsxファイル内でそのままswiper-containerを使おうとする怒られる
プロパティ 'swiper-container' は型 'JSX.IntrinsicElements' に存在しません。ts(2339)
大体の人がきっとissuesに貼られてるコードに辿り着いて開発できるようになると思うんだけど
このままだと以下のようなコードになってしまい、動かないなはず、、。

<swiper-container controller-control=".hoge">...</swiper-container>
<swiper-container className="hoge">...</swiper-container>

上ではったswiper.d.tsを使えば以下のように書けて解決。

<swiper-container controller-control=".hoge">...</swiper-container>
<swiper-container class="hoge">...</swiper-container>