Swiper type error with ESLint and Typescript

Question

I'm making a NextJS 12 Typescript swiper carousel. In developer mode, it runs fine, but when I run npm run build, it returns Type error

./src/layouts/components/ProductDetailContainer.tsx:56:17
Type error: Type '{ children: Element[]; navigation: boolean; modules: SwiperModule[]; className: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<SwiperRef> & SwiperProps & { children?: ReactNode; }'.
  Property 'navigation' does not exist on type 'IntrinsicAttributes & RefAttributes<SwiperRef> & SwiperProps & { children?: ReactNode; }'.

  54 |       <Grid container spacing={4}>
  55 |         <Grid item xs={4}>
> 56 |         <Swiper navigation={true} modules={[Navigation]} className="mySwiper">
     |                 ^

Here is my versions:

• "swiper": "^10.2.0",
  

• "react": "17.0.2",
  

• "next": "^12.3.4",
  

I have followed this instruction from Swiper page but I could not make it work: https://codesandbox.io/p/sandbox/2k3jk3?file=/src/App.jsx