Merhabalar react dilinde bir proje yazıyorum ve alttaki hatayı aldım müsait olan hocalarımdan ricamdır.

Dinamik İmport Yaptığım Kod:
İndex.tsx:

import React from "react";
import { observer } from "mobx-react-lite";
import dynamic from 'next/dynamic'
import {IkasProductList} from "@ikas/storefront"
const Right = dynamic(() => import("./swiperSlider"), {ssr:false})
export default observer(Right);

Dinamik İmport ile Çağırdığım Kod:
swiperSlier/index.tsx:

import React, { useRef, useState } from 'react';
import { observer } from "mobx-react-lite";
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
import { Swiper } from "swiper/react";
import { SwiperSlide } from "swiper/react"
import { ProductListProps } from "../../product-list";
import Product from "../../product-list/right/product"
import 'swiper/css';
import 'swiper/css/pagination';
import * as S from "../../product-list/right/style";
import 'swiper/css/navigation';
import { IkasProductList } from "@ikas/storefront"
const Right = ({ productList }: ProductListProps) => {
  return (
    <S.Main>
      <Swiper navigation pagination={{ clickable: true }} modules={[Navigation, Pagination]} autoplay={{ delay: 3000 }} spaceBetween={10} slidesPerView="auto" breakpoints={{
        320: { slidesPerView: 2, spaceBetween: 5 },
        640: { slidesPerView: 2, spaceBetween: 5 },
        768: { slidesPerView: 2, spaceBetween: 5 },
        1024: { slidesPerView: 6, spaceBetween: 10 },
      }}
    >
          {productList.data.map((product) => (
            <SwiperSlide key={product.selectedVariant.id}>
              <Product product={product} />
            </SwiperSlide>
          ))}
        </Swiper>
    </S.Main>
  );
};
export default observer(Right);

Aldığım Hata:

No overload matches this call.
  Overload 1 of 4, '(baseComponent: ForwardRefExoticComponent<ProductListProps & RefAttributes<{}>>): MemoExoticComponent<ForwardRefExoticComponent<ProductListProps & RefAttributes<...>>>', gave the following error.
    Argument of type 'ComponentType<ProductListProps>' is not assignable to parameter of type 'ForwardRefExoticComponent<ProductListProps & RefAttributes<{}>>'.
      Property '$$typeof' is missing in type 'FunctionComponent<ProductListProps>' but required in type 'ForwardRefExoticComponent<ProductListProps & RefAttributes<{}>>'.
  Overload 2 of 4, '(baseComponent: FunctionComponent<ProductListProps>, options?: IObserverOptions | undefined): FunctionComponent<ProductListProps>', gave the following error.
    Argument of type 'ComponentType<ProductListProps>' is not assignable to parameter of type 'FunctionComponent<ProductListProps>'.
      Type 'ComponentClass<ProductListProps, any>' is not assignable to type 'FunctionComponent<ProductListProps>'.
        Type 'ComponentClass<ProductListProps, any>' provides no match for the signature '(props: PropsWithChildren<ProductListProps>, context?: any): ReactElement<any, any> | null'.
  Overload 3 of 4, '(baseComponent: FunctionComponent<any> | ForwardRefRenderFunction<any, {}>, options?: IObserverOptions | undefined): (FunctionComponent<...> | ForwardRefRenderFunction<...>) & { ...; }', gave the following error.
    Argument of type 'ComponentType<ProductListProps>' is not assignable to parameter of type 'FunctionComponent<any> | ForwardRefRenderFunction<any, {}>'.
      Type 'ComponentClass<ProductListProps, any>' is not assignable to type 'FunctionComponent<any> | ForwardRefRenderFunction<any, {}>'.
        Type 'ComponentClass<ProductListProps, any>' is not assignable to type 'FunctionComponent<any>'.
          Type 'ComponentClass<ProductListProps, any>' provides no match for the signature '(props: any, context?: any): ReactElement<any, any> | null'.