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

In my case, the root problem was having some dependencies that listed "@types/react": "*" in their dependencies. This causes multiple versions of the React type definitions to appear in node_modules, which results in XX cannot be used as a JSX component. errors from Typescript. There is a lengthy discussion of the issue and what should be done about it for library maintainers on GitHub.

The workaround for me (yarn v2) was to run

yarn dedupe '@types/react'

See the GitHub above for work arounds for other package managers.