Responsive Property Does Not Work On React-slick

class SimpleSlider extends React.Component {
  render() {
    let settings_3 = {
      dots: false,
      autoplay: false,
      autoplaySpeed: 3000,
      slidesToShow: 3,

      responsive: [{
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          initialSlide: 2
        }
      }]
    };
    return (
      <Slider {...settings_3}>
        <div>
          <h3>1</h3>
        </div>
        <div>
          <h3>2</h3>
        </div>
        <div>
          <h3>3</h3>
        </div>
        <div>
          <h3>4</h3>
        </div>
        <div>
          <h3>5</h3>
        </div>
        <div>
          <h3>6</h3>
        </div>
      </Slider>
    );
  }
}

ReactDOM.render( <SimpleSlider/> ,
  document.getElementById('root')
);

#root{
text-align: center;
}

<link target="_blank" rel="nofollow noreferrer" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />

<link target="_blank" rel="nofollow noreferrer" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-slick/0.13.1/react-slick.js"></script>

<div id='root'></div>