Next element isn't showing

[Gagan-deepp]

hey only number of images in slide per view is showing next images isn't showing don't know `why????????```

here is code:

import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';

import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

import { Pagination, Navigation } from 'swiper/modules';

const ProjectSwiper = () => {
    return (
        <Swiper
            slidesPerView={3}
            spaceBetween={30}
            pagination={{
                clickable: true,
            }}
            navigation={true}
            modules={[Pagination, Navigation]}
            className="mySwiper"
        >
            <SwiperSlide> <img src="/swiper/mern1.png" alt="" /> </SwiperSlide>
            <SwiperSlide> <img src="/swiper/pic1.png" alt="" /> </SwiperSlide>
            <SwiperSlide> <img src="/swiper/pic2.jfif" alt="" /> </SwiperSlide>
            <SwiperSlide> <img src="/swiper/pic2.jfif" alt="" /> </SwiperSlide>
            <SwiperSlide> <img src="/swiper/pic2.jfif" alt="" /> </SwiperSlide>
            <SwiperSlide> <img src="/swiper/pic2.jfif" alt="" /> </SwiperSlide>
            <SwiperSlide> <img src="/swiper/pic2.jfif" alt="" /> </SwiperSlide>
        </Swiper>
    )
}

export default ProjectSwiper`