Swiper react/typescript 화살표 커스텀 및 slider 인덱스

import React, { ReactElement, useState, useEffect, useRef } from "react"
import styled, { keyframes } from "styled-components";
import { images } from '../../constants/images';
import { FiArrowLeft, FiArrowRight } from "react-icons/fi";

// Import Swiper React components 건드리면 ㄴㄴ
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, EffectCoverflow } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/components/navigation/navigation.min.css';
import 'swiper/components/pagination/pagination.min.css';
import 'swiper/swiper.min.css';
import 'swiper/swiper-bundle.min.css';

SwiperCore.use([Navigation, Scrollbar, EffectCoverflow]);


const OverlaySwitchAny = () => {

  const prevRef = useRef<HTMLButtonElement>(null);
  const nextRef = useRef<HTMLButtonElement>(null);

  const [swiperSetting, setSwiperSetting] = useState<Swiper | null>(null);
  const [swiperIndex, setswiperIndex] = useState<number>(1)

  console.log(swiperIndex)

  useEffect(() => {
    if (!swiperSetting) {
      setSwiperSetting({
        spaceBetween: 5,
        loop: true,
        effect: "coverflow",
        navigation: {
          prevEl: prevRef.current, // 이전 버튼
          nextEl: nextRef.current, // 다음 버튼
        },
        onSlideChange(swiper) {
          setswiperIndex(swiper.realIndex + 1)
        },
        scrollbar: { draggable: true, el: null },
        slidesPerView: 3,
        onBeforeInit: (swiper: SwiperCore) => {
          if (typeof swiper.params.navigation !== 'boolean') {
            if (swiper.params.navigation) {
              swiper.params.navigation.prevEl = prevRef.current;
              swiper.params.navigation.nextEl = nextRef.current;
            }
          }
          swiper.navigation.update();

        },
      });
    }
  }, [swiperSetting]);


  return (
    <StyledRoot>
      {swiperSetting &&
        <>
          <button ref={prevRef} >
            <FiArrowLeft />
          </button>
          <button ref={nextRef} >
            <FiArrowRight />
          </button>

          {swiperIndex === 1 ?
            <Swiper {...swiperSetting}>
              <SwiperSlide><Container color="0.1" >스틸이미지1</Container></SwiperSlide>
              <SwiperSlide><Container2>스틸이미지2</Container2></SwiperSlide>
              <SwiperSlide><Container3 color="0.1">스틸이미지3</Container3></SwiperSlide>
            </Swiper>
            : swiperIndex === 2 ?
              <Swiper {...swiperSetting}>
                <SwiperSlide><Container color="0.1">스틸이미지1</Container></SwiperSlide>
                <SwiperSlide><Container2 color="0.1">스틸이미지2</Container2></SwiperSlide>
                <SwiperSlide><Container3>스틸이미지3</Container3></SwiperSlide>
              </Swiper>
              : swiperIndex === 3 ?
                <Swiper {...swiperSetting}>
                  <SwiperSlide><Container>스틸이미지1</Container></SwiperSlide>
                  <SwiperSlide><Container2 color="0.1">스틸이미지2</Container2></SwiperSlide>
                  <SwiperSlide><Container3 color="0.1">스틸이미지3</Container3></SwiperSlide>
                </Swiper> : null}
        </>
      }

    </StyledRoot>
  )
}

const StyledRoot = styled.div`
	.swiper {
    		&-wrapper,
    		&-container {
      			width: 50rem;
      			margin: 0;
    		}
    
    		// &-button-disabled {
      	// 		visibility: hidden;
    		// }
  	}
`;
const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: bold;
  width: 250px;
  height: 250px;
  background-color: gray;
  border-radius: 40px;
  opacity: ${props => props.color}
`
const Container2 = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: bold;
  width: 250px;
  height: 250px;
  background-color: gray;
  border-radius: 40px;
  opacity: ${props => props.color}
`
const Container3 = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-weight: bold;
  width: 250px;
  height: 250px;
  background-color: gray;
  border-radius: 40px;
   opacity: ${props => props.color}
`
const FillImage = styled.img`
  width: 400px;
  height: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-idex: auto;
`;

const StyledButton = styled.button`
  width: 20px;
  height: 20px;
  backgroud-color: red;
  cursor: pointer;
`

export default OverlaySwitchAny