Slider does not work in react-slick with typescript

Question

I am using the typescript version (@types/react-slick) of the react-slick library to implement carousel/slider in a Nextjs project. I am getting the following error after importing the Slider component from the package:

Here is the exact error message that is displayed when "Slider" is hovered on:

'Slider' cannot be used as a JSX component.
  Its instance type 'Slider' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("c:/Users/bello/node_modules/@types/react/ts5.0/index").ReactNode'.
        Type 'PromiseLikeOfReactNode' is not assignable to type 'ReactNode'.ts(2786)
(alias) class Slider
import Slider

The code is below is a carousel component I wish to create that will slide images and texts:

SlickCarousel.tsx

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { agentReviewListType } from "../_models/props";
import Image from "next/image";

export default function SlickCarousel({
  items,
}: {
  items: agentReviewListType;
}) {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  return (
    <section>
      <Slider {...settings}>
        {items.map((item, index) => (
          <article key={index}>
            <Image src={item.image} alt="image" />
            <p>{item.message}</p>
          </article>
        ))}
      </Slider>
    </section>
  );
}

Answer 1

you're going to want to use a react "ref" like this:

const sliderRef = React.useRef<Slider>(null);

And then pass that into your slider component like this:

<Slider ref={sliderRef} {...settings}>
   {items.map((item => RENDER_YOUR_ITEM_HERE))}
</Slider>