Why is my Swiper render buggy at the first time render using React

I’m using React and trying to fetch some of my anime into the home banner using Swiper

I don’t know why when I refresh my page, it’ll only render at half of the swiper.

Here’s how it display:

However, if I press the next or back button, it’ll display normally again.

Here’s my code in my Home Component:

import { useState, useEffect } from "react"
import ReactHlsPlayer from 'react-hls-player';
import './home.css'
import { supabase } from '../../supabaseClient'
import { Swiper, SwiperSlide } from 'swiper/react'
import SwiperCore, { Pagination,Navigation } from 'swiper';
import 'swiper/css'

SwiperCore.use([Pagination,Navigation]);
function Home(){
    useEffect(async ()=>{
        fetchAnime()
    }, [])
    const [animeDetail, setAnimeDetail] = useState([])
    async function fetchAnime() {
        const { data } = await supabase
            .from ('anime')
            .select ()
            setAnimeDetail(data)
    }

    return (
        <>
        <div className="spacer">
            &nbsp;
        </div>
        <div className="home-section">
            <h2>Home Page</h2>
            <Swiper 
            centeredSlides={true}
            slidesPerView={7}
            spaceBetween={10}
            loop={true}
            pagination={false} 
            navigation={true} className="mySwiper">
                {animeDetail.map((element, i)=> 
                    (
                    <SwiperSlide key = {i}><img src={element.anime_image}/></SwiperSlide>
                    )
                    )}

            </Swiper>
        </div>
        </>
    )

}
export default Home

And here’s my Home CSS, sorry if it’s a bit messy, I’m still trying it here and there, but I’m stuck.

  .swiper {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .swiper-wrapper{
    width: 100%
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 280px;
  }
  .swiper-slide img {
    display: block;
    box-sizing: border-box;
    border: none;
    max-height: 350px;
    min-height: 350px;
    -o-object-fit: cover;
       object-fit: cover;
    transition: all .3s ease;
    opacity: 0.5
  }

  .swiper-slide-active {
    transform: scale(1.2);
    z-index: 2
  }
  .swiper-slide-active img{
    transition: all .3 ease;
    opacity: 1
  }

And if someone figures it out, please help me a bit, I tried to whenever the item in the middle is in active, it’ll pop out bigger, but I can’t do it with transform: scale(number) – I have tried it (It does get bigger when it’s active but it doesn’t display bigger at the height, I haven’t figured it out some ways at the moment)