in my Next.JS SSR rendering page, Swiper doesn't show correctly when JavaScript is disabled in browser

Question

everything works correctly but if I disable JavaScript in the browser, my Swiper slider doesn't show correctly (an item fills full width and height)

My swiper slider ( for arrays of brands)

import React from "react";
import {BannerType} from "@/contracts/bannerContract";
import {Swiper, SwiperSlide} from "swiper/react";
import {Autoplay, Navigation} from "swiper";
import Link from "next/link";
import Image from "next/image";

const HomeBrands: React.FC<{ items: BannerType[] }> = ({items}) => {

    return (
        <Swiper
            initialSlide={2}
            modules={[Autoplay, Navigation]}
            loop={true}
            slidesPerView={"auto"}
            autoplay={{disableOnInteraction: false, pauseOnMouseEnter: true, delay: 5000}}
            centeredSlides={true}
            spaceBetween={5}
            breakpoints={{
                320: {
                    slidesPerView: 2,
                    spaceBetween: 5,
                },
                640: {
                    slidesPerView: 4,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 5,
                    spaceBetween: 25,
                },
                1024: {
                    slidesPerView: 6,
                    spaceBetween: 25,
                },
                1280: {
                    slidesPerView: 7,
                }
            }}
        >

            {items.map((brand, i) =>

                <SwiperSlide
                    key={i}
                >
                    <Link href={brand.url || '/'} aria-label={brand.title} passHref>
                        <a
                            target="_blank">
                            <Image quality={100} src={brand.picture} alt={brand.title} layout={'responsive'} width={40}
                                     height={40}/>
                        </a>
                    </Link>
                </SwiperSlide>
            )}
        </Swiper>
    )
}

export default HomeBrands

and I load it in the a ssr reandering page:

const HomeBrands = dynamic(() => import("@/components/HomeBrands"), {
    ssr: true, loading: () => <ImageLoading/>
})

....

    {brand.length > 0 && <section className={'container mt-8 mx-auto'}>
        <HomeBrands items={brand}/>
    </section>}

...