Owl Carousel npm module is not working in reactjs

I am working on a reactjs application and I am using owl carousel npm module to show some data.

I am having a component which only renders owl carousel , for that I installed owl carousel and importing like below

import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

and below is the render method

 render() {
    const options = { 
        nav: true,
        navText:["<div className='nav-btn prev-slide'></div>","<div className='nav-btn next-slide'></div>"],
        rewind: false,
        autoplay: true,
        slideBy: 1,
        dots: true,
        dotsEach: true,
        dotData: true
      };
      if(!this.state.response) return(<div>Loading...</div>);
      return (
          <div className="container">
          <div className="PageHeading">
            <div className="row">
              <div className="col-md-8 col-sm-8 col-xs-12"><h4>Latest Published</h4></div>
              <div className="col-md-4 col-sm-4 col-xs-12 text-right"><Link to="/">View All&nbsp;<i className="arrow_carrot-right"></i></Link></div></div>
              </div>
              <br />
             <OwlCarousel ref="gallery" margin={15} loop autoplay={true} items={6}  options={options}>
                {
                    this.state.response.map((obj,key)=>
                    <div className="" key={key}>
                    <div className="subcategories_blockCard"> 
                    <Link to={'/book/'+obj.book_title.split(' ').join('-')}>
                        <img src={'http://localhost:3001/'+obj.book_cover} style={{'width':'100%'}} title={obj.book_title}/>
                        {/* <div className="card-content">{obj.book_title}</div> */}
                        </Link>
                    </div>
                </div>
                    )
                }

            </OwlCarousel>
          </div>

        )
  }

Now, problem is that when the application get started carousel items not visible and when I click any link which contains the root path http://localhost:3000/ (suppose the logo of the application contains href of http://localhost:3000/ and when click on logo which is <a href="http://localhost:3000"><img src="logo.png /></a>) then carousel gets appear on the page.

I don't know how to fix it, Please help me.

I guess your problem is that you are not using setState to change the state.