Swiper doesn't show all slide

[p4rtridge]

I'm currently migrating to 10.0.4. It recognize all dynamic images but only show first image. Only show all images when nextJS do fast refresh.

here's my code

'use client';

import type { ExtendedManga } from '@/types/db';
import Image from 'next/image';
import { FC } from 'react';
import Swiper from 'swiper';
import 'swiper/css';
import 'swiper/css/autoplay';
import 'swiper/css/effect-coverflow';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import { EffectCoverflow } from 'swiper/modules';

interface NotableMangaProps {
  manga: ExtendedManga[];
}

new Swiper('.swiper', {
  modules: [EffectCoverflow],
  spaceBetween: 10,
  slidesPerView: 'auto',
  centeredSlides: true,
  coverflowEffect: {
    rotate: 0,
    stretch: 0,
    depth: 100,
    modifier: 2.5,
  },
  effect: 'coverflow',
});

const NotableManga: FC<NotableMangaProps> = ({ manga }) => {
  return (
    <div className="swiper relative h-72">
      <div className="swiper-wrapper">
        {manga.map((m, idx) => (
          <div key={idx} className="swiper-slide">
            <div className="relative mx-auto h-full w-[90%]">
              <Image fill sizes="0%" src={m.image} alt="Manga Image" />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default NotableManga;

here's my video: Link