Swiper Navigation and Pagination not working in react used Vite

Question

I imported import { Navigation, Pagination } from 'swiper/modules'; and when** modules={[Navigation, Pagination]} **is used inside swiper tag. navigation button itself missing in browser. if modules={[Navigation, Pagination]} is not used navigation button appears but still cannot able to slide .I used vite

import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination'
import css from './SwipperSlider.css';
const SwipperSlider = () => {
  
  return (
    <div className='scontainer'>
      <Swiper
        modules={[Navigation, Pagination]}
        speed={500}
        navigation={true}
        slidesPerView={3}
        spaceBetween={40}
        slidesPerGroup={1}
        pagination={{ clickable: true }}
        className='myswiper'
        onSwiper={(swiper) => console.log(swiper)}
        onSlideChange={() => console.log('slide change')}>

Used above code.Expected card slides each one at a time when navigation button clicks.