我下载了一个nextJs登陆页面模板，在每个组件中，如果Slider试图通过数组进行Map，我都会遇到这个错误;我尝试查找解决方案，发现this是相关的，但它对我不起作用。或者我不知道如何将片段添加到Slider中。
请提供协助。

悬停在滑块上时出错。

No overload matches this call.
  Overload 1 of 2, '(props: Settings | Readonly<Settings>): Slider', gave the following error.
    Type 'Element[]' is not assignable to type 'ReactNode'.
  Overload 2 of 2, '(props: Settings, context: any): Slider', gave the following error.
    Type 'Element[]' is not assignable to type 'ReactNode'.ts(2769)
index.d.ts(40, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Slider> & Readonly<Settings>'
index.d.ts(40, 5): The expected type comes from property 'children' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Slider> & Readonly<Settings>'

字符串

在应用程序上添加组件时出错

'Component' cannot be used as a JSX component.
  Its instance type 'MultipleItems' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'Element' is not assignable to type 'ReactNode'.ts(2786)

型

文件结构

第页.tsx

import Banner from './components/Banner/index';
import Companies from './components/Companies/Companies';
import Courses from './components/Courses/index';
import Mentor from './components/Mentor/index';
import Testimonials from './components/Testimonials/index';
import Newsletter from './components/Newsletter/Newsletter';

export default function Home() {
  return (
    <main>
      <Banner />
      <Companies />
      <Courses />
      <Mentor />
      <Testimonials />
      <Newsletter />
    </main>
  )
}

型

组件.tsx

"use client"
// Imports go here.

// IMAGES DATA FOR CAROUSEL
interface Data {
    imgSrc: string;
}

const data: Data[] = [
    {
        imgSrc: "/assets/carousel/airbnb.svg"
    },
   // And others
]

// CAROUSEL SETTINGS
export default class MultipleItems extends Component {
    render() {
        const settings = {
            dots: false,
            infinite: true,
            slidesToShow: 4,
            slidesToScroll: 1,
            arrows: false,
            autoplay: true,
            speed: 2000,
            autoplaySpeed: 2000,
            cssEase: "linear",
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 4,
                        slidesToScroll: 1,
                        infinite: true,
                        dots: false
                    }
                },
               // breakpoints 700, and 500 included too
            ]
        };

        return (

            <div className='text-center my-20'>
                <div className="mx-auto max-w-4xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
                    <h2 className="text-midnightblue text-2xl font-semibold">Trusted by companies of all sizes</h2>
                    <div className="py-14">

// Error happening on this slider 
----------------------------------------------------------------------------------------------
                        <Slider {...settings}>
                            {data.map((item, i) =>
                                <div key={i}>
                                    <Image src={item.imgSrc} alt={item.imgSrc} width={116} height={36} />
                                </div>
                            )}
                        </Slider>
----------------------------------------------------------------------------------------------
                    </div>
                    <hr />
                </div>
            </div>

        )
    }
}

型