How to fix typescript error in react-carousel Breakpoints section configuration?

i try to use react-carousel to implement a carousel for a component rotation.

here is my snippet of code

 <Carousel value={current} onChange={setCurrent} slides={cars}

            plugins={[

                "clickToChange",

                {

                  resolve: slidesToShowPlugin,

                  options: {

                    numberOfSlides: 3,

                  },

                },

              ]}

              

              breakpoints={{

                640: {

                  plugins: [

                    "clickToChange",

                    {

                      resolve: slidesToShowPlugin,

                      options: {

                        numberOfSlides: 1,

                      },

                    },

                  ],

                },

                900: {

                  plugins: [

                    {

                      resolve: slidesToShowPlugin,

                      options: {

                        numberOfSlides: 2,

                      },

                    },

                  ],

                },

              }}

            /><Dots value={current} onChange={setCurrent} number={numberOfDots}/>

however, there is an error indicator to show that there is a problem with No overload matches for this call. 

TypeScript error in /home/yang/pfc_frontend/src/components/YACarousel/index.tsx(23,11):

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<CarouselProps>): default', gave the 

following error.Type '{ 640: { plugins: { resolve: CarouselPluginFunc; options: { 

numberOfSlides: number; }; }[]; }; 900: { plugins: { resolve: CarouselPluginFunc; 

options: { numberOfSlides:number; }; }[]; }; }' is not assignable to type  

'Pick<CarouselProps, "className" | "offset" | "onChange" | "draggable" | "value" | 

"plugins" | "itemWidth" | "slides" | "animationSpeed">'.
      Object literal may only specify known properties, and '640' does not exist in type 
'Pick<CarouselProps, "className" | "offset" | "onChange" | "draggable" | "value" | 

"plugins" | "itemWidth" | "slides" | "animationSpeed">'.
  Overload 2 of 2, '(props: CarouselProps, context?: any): default', gave the following 

error.
    Type '{ 640: { plugins: { resolve: CarouselPluginFunc; options: { numberOfSlides: 

number; }; }[]; }; 900: { plugins: { resolve: CarouselPluginFunc; options: { 

numberOfSlides: number; }; }[]; }; }' is not assignable to type 'Pick<CarouselProps, 

"className" | "offset" | "onChange" | "draggable" | "value" | "plugins" | "itemWidth" | 

"slides" | "animationSpeed">'.
      Object literal may only specify known properties, and '640' does not exist in type 

'Pick<CarouselProps, "className" | "offset" | "onChange" | "draggable" | "value" | 

"plugins" | "itemWidth" | "slides" | "animationSpeed">'.  TS2769

    21 |         itemWidth={400}
    22 |         breakpoints={{
  > 23 |           640: {
       |           ^
    24 |             plugins: [
    25 |               {
    26 |                 resolve: slidesToShowPlugin,

this error stems from the typescript configuration. it did not properly get the type for 

react-carousel.as a result, the visual studio cannot recognize the syntax.

we have to import the module manually by creating a react-carousel.d.ts file and put the 

following line into the file. so that the typescript can proper understand it.

declare module "@brainhubeu/react-carousel";