React.jsでSwiperの要素をfor文で作成した場合に、ナビゲーションが動かない

閲覧ありがとうございます。
表題の件について、ご教授いただけますと幸いです。

前提

・ReactでSwiperを使用し、画像をスライダー形式で表示する。
・Swiperはnpmで取得し、2022年6月26日の時点で最新のものを使用。

・画像のパスをpropsの配列で取得。
・取得した配列のlengthを基に、for文でSwiperの要素を作成。（ここで行き詰まり）

実現したいこと

for文でSwiperの要素を作成し、画像をスライダー形式で表示できること。

発生している問題・エラーメッセージ

画像の表示まではできたが、ナビゲーションのボタンを押下しても次の画像がスライドされてこない。

該当のソースコード

js
1//コンポーネント
2import WorksDisplay from '../components/WorksDisplay';
3import WorksDetails from '../components/WorksDetails';
4import CommonFooter from '../components/CommonFooter';
5
6function Works() {
7  // タブ切り替え処理
8  const activeTabIndex = () => {
9    const tabs = document.getElementsByClassName('works-tab-index');
10  	for(let i = 0; i < tabs.length; i++) {
11  		tabs[i].addEventListener('click', tabSwitch, false);
12  	}
13
14    function tabSwitch() {
15      document.getElementsByClassName('is-active')[0].classList.remove('is-active');
16    	this.classList.add('is-active');
17    	// コンテンツのclassの値を変更
18    	document.getElementsByClassName('is-show')[0].classList.remove('is-show');
19    	const arrayTabs = Array.prototype.slice.call(tabs);
20    	const index = arrayTabs.indexOf(this);
21    	document.getElementsByClassName('works-performance')[index].classList.add('is-show');
22    }
23  }
24  return (
25    <div className="works content">
26      <div className="contents-index">
27        <h2>Works</h2>
28      </div>
29      <p className="works-text">
30        制作実績です。主に個人としてのWeb（デザインとコーディング）制作の記録です。
31      </p>
32      <ul id="works-tab" className="works-tab">
33        <li className="works-tab-index is-active" onClick={activeTabIndex}>WebDesign</li>
34        <li className="delimiter-icon"></li>
35        <li className="works-tab-index" onClick={activeTabIndex}>Cording</li>
36      </ul>
37      <div className="works-performance is-show">
38        <ul className="works-performance-list">
39          <li className="works-performance-list-item">
40            <WorksDisplay siteThumbnail="/images/thumbnails/XXXX.png" siteName="XXXX" siteType="サイト" />
41          </li>
42        </ul>
43        <ul className="performance-details">
44          <li className="performance-details-item">
45            <WorksDetails siteName="XXXX" siteType="サイト" slideImg={['/images/thumbnails/XXXX.png', '/images/thumbnails/XXXX.png', '/images/thumbnails/XXXX.png']} siteUrl="XXX" myJob="コーディング" tools="AtoM" language="HTML/CSS/JS/React.js" siteIntroduce="XXX" />
46          </li>
47        </ul>
48      </div>
49      <div className="works-performance">
50        <p>index02</p>
51      </div>
52    </div>
53  );
54}
55
56export default Works;
57
58

jsx
1
2//Swiper
3import React, { useRef } from "react";
4// import Swiper JS
5import Swiper from 'swiper';
6import 'swiper/css';
7import SwiperCore, { Pagination, Navigation } from "swiper";
8SwiperCore.use([Pagination, Navigation]);
9
10const WorksDetails = (props) => {
11  // サイト名の取得
12  const siteName = props.siteName;
13  // サイトの種類の取得
14  const siteType = props.siteType;
15  // スライダーの配列を取得
16  const slideImg = props.slideImg;
17  // サイトURLの取得
18  const siteUrl = props.siteUrl;
19  // 担当の取得
20  const myJob = props.myJob;
21  // 使用ツールの取得
22  const tools = props.tools;
23  // 使用言語の取得
24  const language = props.language;
25  // 説明の取得
26  const siteIntroduce = props.siteIntroduce;
27
28  // slideViewを基にスライダーのタグを生成
29  window.onload = function() {
30    let slideArr = [];
31    for(let i = 0; i < slideImg.length; i++) {
32      slideArr.push('<div className="swiper-slide"><img src="' + slideImg[i] + '" /></div>');
33    }
34    let parentDiv = document.getElementsByClassName('swiper-wrapper');
35    parentDiv.innerHTML = slideArr.join('');
36
37    const swiper = new Swiper('.swiper', {
38      loop: true,
39      pagination: {
40        el: '.swiper-pagination',
41      },
42      navigation: {
43        nextEl: '.swiper-button-next',
44        prevEl: '.swiper-button-prev',
45      },
46    });
47  }
48
49
50
51
52  return (
53    <>
54      <div className="performance-details-contents">
55        <h3 className="site-name">{siteName}</h3>
56        <p className="site-type">{siteType}</p>
57        <div className="swiper-area">
58          <div className="swiper">
59            <div className="swiper-wrapper">
60              // <div className="swiper-slide">
61              //  <img src="/images/thumbnails/XXXX.png" />
62              // </div>
63              // <div className="swiper-slide">
64              //  <img src="/images/thumbnails/XXXX.png" />
65              // </div>
66              // <div className="swiper-slide">
67              //  <img src="/images/thumbnails/XXXX.png" />
68              // </div>
69            </div>
70            <div className="swiper-pagination"></div>
71            <div className="swiper-scrollbar"></div>
72          </div>
73          <div className="swiper-button-prev"></div>
74          <div className="swiper-button-next"></div>
75        </div>
76        <h4 className="performance-details-index">URL</h4>
77        <p className="performance-details-text">
78          <a href={siteUrl}>{siteUrl}</a>
79        </p>
80        <h4 className="performance-details-index">担当</h4>
81        <p className="performance-details-text">{myJob}</p>
82        <h4 className="performance-details-index">使用ツール</h4>
83        <p className="performance-details-text">{tools}</p>
84        <h4 className="performance-details-index">使用言語</h4>
85        <p className="performance-details-text">{language}</p>
86        <p className="performance-details-text introduce">{siteIntroduce}</p>
87      </div>
88    </>
89  )
90}
91
92export default WorksDetails;
93
94

css
1
2/* ******************************************
3Works Contents
4****************************************** */
5.works-text {
6  margin-top: 4.8rem;
7  text-align: center;
8}
9.works-tab {
10  display: flex;
11  justify-content: center;
12  align-items: center;
13  margin-top: 4.0rem;
14}
15.works-tab-index {
16  position: relative;
17  display: flex;
18  align-items: center;
19  cursor: pointer;
20}
21.works-tab-index.is-active::after {
22  content: "";
23  position: absolute;
24  bottom: -0.8rem;
25  left: 0;
26  display: block;
27  background-color: #333;
28  height: 2px;
29  width: 100%;
30}
31.delimiter-icon::after {
32  content: "/";
33  display: block;
34  color: #333;
35  margin: 0 2.4rem;
36}
37.works-performance {
38  display: none;
39}
40.works-performance.is-show {
41  display: block;
42}
43.works-performance-list-item {
44  width: 240px;
45  cursor: pointer;
46}
47.works-performance-list-item img {
48  display: block;
49  border: 1px solid #808080;
50  height: auto;
51  width: 100%;
52}
53.site-name {
54  font-size: 1.8rem;
55  font-weight: 700;
56  margin-top: 0.8rem;
57  text-align: center;
58}
59.site-type {
60  font-size: 1.4rem;
61  text-align: center;
62}
63.performance-details-item {
64  position: fixed;
65  top: 0;
66  left: 0;
67  height: 100%;
68  width: 100%;
69  background-color: rgba(0, 0, 0, .5);
70  z-index: 5;
71}
72.performance-details-contents {
73  position: absolute;
74  top: 50%;
75  left: 50%;
76  transform: translate(-50%, -50%);
77  background-color: #fff;
78  height: 600px;
79  width: 920px;
80  padding: 2.4rem;
81  overflow-y: auto;
82}
83.performance-details-contents a {
84  color: #000;
85}
86.performance-details-index {
87  font-weight: 700;
88}
89.performance-details-index,
90.performance-details-text.introduce {
91  margin-top: 1.6rem;
92}
93.performance-details-text {
94  margin-top: 0.8rem;
95}
96.swiper-area {
97  position: relative;
98  width: 600px;
99  height: 300px;
100  margin: 0 auto;
101}
102.swiper {
103  position: relative;
104  width: 100%;
105  height: 100%;
106}
107.swiper-slide {
108  width: 100%!important;
109}
110.swiper img {
111  width: 600px;
112}
113.swiper-button-prev,
114.swiper-button-next {
115  position: absolute;
116  top: 50%;
117  transform: translateY(-50%);
118  display: block;
119  height: 40px;
120  width: 40px;
121  background-color: #000;
122}
123.swiper-button-prev {
124  left: -6.4rem;
125}
126.swiper-button-next {
127  right: -6.4rem;
128}
129

試したこと

①要素作成のfor文の記述をloadが完了する前/後に移動させる。
→let parentDiv = document.getElementsByClassName('swiper-wrapper');の処理がnullになるため、なし。

②return()内のswiper-wrapperクラス配下に<div className="swiper-slide"><img src="/images/thumbnails/XXXX.png" /></div>を記載した。
→正常に動く。そのため、for文の箇所が問題であることは判明したが、修正方法で行き詰まり。