SwiperReactコンポーネントでリロードを伴わない再レンダリングの時も正しく画像が表示されるようにしたい

前提・実現したいこと

現在、SwiperReactコンポーネントを使用して画像スライダーを実装しているのですが、別ページに遷移したときや別ページから帰ってきたときに画像が本来よりも大きいサイズで表示されてしまい、リロードをすると素の大きさに戻ってスライドしていくのですが、これはどのようなことが原因なのでしょうか？
また、正しく元の画像の大きさで表示されるにはどうすればいいでしょうか？

該当のソースコード

js
1import Rimage from "../common/images";
2import Link from "next/dist/client/link";
3import {Swiper,SwiperSlide} from "swiper/react";
4import SwiperCore, {
5    Autoplay,Pagination,Navigation
6  } from 'swiper/core';
7  SwiperCore.use([Autoplay]);
8
9export default function AutoSlide(props){
10    let index = props.data
11    return(
12        <>
13        <div>
14        <Swiper autoplay={{
15                    'delay': 4500,
16                    'disableOnInteraction': false
17                }} spaceBetween={30} slidesPerView={1.4} centeredSlides={true} loop={true} speed={700} 
18                breakpoints={{"800":{"spaceBetween":50},"1100":{"slidesPerView":2.7}} }>
19        {index.map((value) => (
20                <div>
21                    <SwiperSlide >
22                        <Link href={value.link} >
23                            <a>
24                    <div className="slideImg">
25                        <Rimage src={value.imgSrc} alt={value.alt} />
26                    </div>
27                    </a>
28                    </Link>
29                    </SwiperSlide>
30                </div>
31            ))}
32
33        </Swiper>
34        </div>
35       
36        <style jsx>{`
37            .slideImg{
38                height:100%;
39            }
40            
41            `}</style>
42        </>
43    )
44}