React Slick Showing empty slides

Question

I was creating a slider in react-js using react-slick. But it is only showing empty slides. Also, the left-right control is invisible.

Only the dots are visible.

I was following the react-slick documentation to create the slider. Here is the code for the same.

import React from "react";
import Slider from "react-slick";
const TestimonialSlider = () => {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 3,
    slidesToScroll: 3,
  };
  return (
    <div>
      <h2> Multiple items </h2>
      <Slider {...settings}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>isdjfsdjflksdjflkjsadlkfjslkadfjklsadjflksdaf</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
        <div>
          <h3>5</h3>
        </div>
        <div>
          <h3>6</h3>
        </div>
        <div>
          <h3>7</h3>
        </div>
        <div>
          <h3>8</h3>
        </div>
        <div>
          <h3>9</h3>
        </div>
      </Slider>
    </div>
  );
};

export default TestimonialSlider;