【swiper】画像を一つずつ表示させたい

今swiperを使って画像を1つずつ表示させてたいと考えてます。
ただ、全ての画像をが1つの箱に表示されてしまってる状況です。
どのようなcssを当てると1つずつ表示されるかご教授頂けると幸いです。

【現状】

【完成イメージ】

このUIとなった理由として
import 'swiper/css/swiper.css'　をimportしたら【現状】の表示になってしまいcssを当てても変更できない状況です。

現在のコード

product
1
2import React,{useState} from 'react'
3import Swiper from 'react-id-swiper';
4import CardDetail from '../Card/Card';
5
6import 'swiper/css/swiper.css'
7
8
9const productLists =[{
10    img:'https://images.unsplash.com/photo-1618221227897-57302c9460b6?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
11    title:'デスク',
12    message:'今日はすごくいい天気ですね。昼飯はマックを食べたいと思います。午後も勉強頑張ります'
13},
14{
15    img:'https://images.unsplash.com/photo-1618191635333-7a6dfce0f9fb?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0NHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
16    title:'子供',
17    message:'昔の夢はメジャーリーグでプレーすることでした。夢は叶いませんでしたが野球をやれたことに感謝してます。みなさんの小さい時の夢はなんでしたか？'
18},
19{
20    img:'https://images.unsplash.com/photo-1618144600576-8052ff983901?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw1N3x8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
21    title:'旅行',
22    message:'最近はコロナで旅行を控えています。コロナが落ち着いた北海道・石垣島・九州を旅行したいと思います。それまではstay homeを楽しみたいと思います'
23},{
24    img:'https://images.unsplash.com/photo-1618111415321-b406d66958de?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5MXx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
25    title:'運動',
26    message:'適度に運動をしてますか？私は週に2回ランニングをしてます。'
27}]
28
29const SkillProduct:React.FC = () => {
30    const [params] = useState({
31        slidesPerView: 1,
32        spaceBetween: 30,
33        loop: true,
34        pagination: {
35            el: ".swiper-pagination",
36            clickable: true,
37            dynamicBulles:true,
38            
39        },
40        navigation: {
41            nextEl: ".swiper-button-next",
42            prevEl: ".swiper-button-prev",
43        },
44    });
45    
46    return (
47        <div>
48            <Swiper {...params}>
49            {productLists.map((productList,index) =>
50                
51                <CardDetail key={index} img={productList.img} title={productList.title} message={productList.message}/>
52            )}
53            </Swiper>
54        </div>
55    )
56}
57
58export default SkillProduct
59

cardDitail
1import React from 'react'
2import styles from './Card.module.css'
3
4
5type product = {
6    img:string,
7    title:string,
8    message:string
9}
10const CardDetail:React.FC<product> = (props) => {
11    
12    return (
13        
14        <div className={styles.root}>
15            <div className={styles.container}>
16         <div className={styles.pictureArea}>
17       <img className={styles.img} src={props.img} alt=""/>
18       </div>
19          <div className={styles.messageArea}>
20            <h2 className={styles.title}>
21              {props.title}
22            </h2>
23            <p>
24             {props.message}
25            </p>
26          </div>
27          </div>
28       
29      </div>
30      
31    )
32}
33
34export default CardDetail
35

css
1.root {
2  width: 70%;
3  height: 500px;
4  background-color: #fff;
5  margin: 0 auto;
6  margin-top: 7%;
7 
8}
9
10.pictureArea {
11  width: 100%;
12  height: 320px;
13}
14.img {
15  object-fit: cover;
16  width: 100%;
17  height: 320px;
18}
19
20.messageArea {
21  box-sizing: border-box;
22  padding: 20px;
23}
24
25.title {
26  text-align: center;
27}
28