React JS render method called with state update but component view did not update

Hello I am implementing owl carousel in react.I am updating images array on click of buttons in owl carousel but when it clicked once only the state gets updated but owl carousel view did not get updated.When i click one more time on same button then that view gets updated. Here is the code:

import React, { Component } from 'react';
import "./ScreenshotsSection.css";
import OwlCarousel from 'react-owl-carousel';
import screenshotSection1 from "../../../assets/photos/screenshotSection1.jpg";
import screenshotSection2 from "../../../assets/photos/screenshotSection2.jpg";
import screenshotSection3 from "../../../assets/photos/screenshotSection3.jpg";
import screenshotSection4 from "../../../assets/photos/screenshotSection4.jpg";
import screenshotSection5 from "../../../assets/photos/screenshotSection5.jpg";
import "../../../../node_modules/owl.carousel/dist/assets/owl.carousel.css";
import "../../../../node_modules/owl.carousel/dist/assets/owl.theme.default.css";

class ScreenshotsSection extends Component {
    constructor(){
        super();
        this.state = {
            filterButtons: [
                {
                    id: "all",
                    displayName: "All",
                    isActive: true
                },
                {
                    id: "login",
                    displayName: "Login",
                    isActive: false
                },
                {
                    id: "calendar",
                    displayName: "Calendar",
                    isActive: false
                },
                {
                    id: "chart",
                    displayName: "Chart",
                    isActive: false
                },
                {
                    id: "main",
                    displayName: "Main",
                    isActive: false
                },
                {
                    id: "workout",
                    displayName: "Workout",
                    isActive: false
                },
            ],
            imageCarousel: [
                screenshotSection1,
                screenshotSection2,
                screenshotSection3,
                screenshotSection4,
                screenshotSection5,
                screenshotSection5,
                screenshotSection5,
                screenshotSection5,
                screenshotSection5
            ],
            allImages: [
                screenshotSection1,
                screenshotSection2,
                screenshotSection3,
                screenshotSection4,
                screenshotSection5,
                screenshotSection5,
                screenshotSection5,
                screenshotSection5,
                screenshotSection5
            ],
            loginImages: [
                screenshotSection3,
                screenshotSection4,
                screenshotSection1,
                screenshotSection1
            ],
            calendarImages: [
                screenshotSection2,
                screenshotSection5,
                screenshotSection4
            ],
            chartImages: [
                screenshotSection5,
                screenshotSection2
            ],
            mainImages: [
                screenshotSection2,
                screenshotSection3,
                screenshotSection1,
                screenshotSection5,
                screenshotSection5,
                screenshotSection4
            ],
            workoutImages: [
                screenshotSection5,
                screenshotSection1,
                screenshotSection2
            ]
        }
    }
    toggleActiveBtn = (filterBtn,e) => {
        let { filterButtons,imageCarousel, allImages, loginImages, calendarImages, chartImages, mainImages, workoutImages } = this.state;
        let id=e.target.id;
        $("#"+id).click();
        let updatedFilterButtons = filterButtons.map((item) => {
            if (item.id === filterBtn.id) {
                item.isActive = true;
                if(item.id ==="all")
                        this.setState({
                            imageCarousel:allImages
                        }) ;
                else if(item.id ==="login")
                    this.setState({
                        imageCarousel:loginImages
                    }) ;
                else if(item.id ==="calendar")
                    this.setState({
                        imageCarousel:calendarImages
                    }) ;
                else if(item.id ==="chart")
                    this.setState({
                        imageCarousel:chartImages
                    }) ;
                else if(item.id ==="main")
                    this.setState({
                        imageCarousel:mainImages
                    }) ;
                else if(item.id ==="workout")
                    this.setState({
                        imageCarousel:workoutImages
                    }) ;
            }
            else {
                item.isActive = false;
            }
            return item;
        })
            this.setState({
            filterButtons: updatedFilterButtons,
        }, () => {
            console.log(this.state);
        });

    }
    render() {
        let { filterButtons,imageCarousel, allImages, loginImages, calendarImages, chartImages, mainImages, workoutImages } = this.state;

        console.log(imageCarousel);
        return (
            <div id="ScreenshotsSection">
                <div className="container">
                    <div className="columns">
                        <div className="column">
                            <h2 className="sec-title animation">
                                Awesome Screenshots</h2>
                            <div className="hr delay-a" />
                            <p className="subheader delay-b">
                                Lorem ipsum dolor sit amet consectetur adipiscing elit donec tempus pellentesque dui
                                vel tristique purus justo vestibulum eget lectus non gravida ultrices    </p>
                            <div className="filter-btns">
                                {filterButtons.map((filterBtn) => (
                                    <a id={filterBtn.id} key={filterBtn.id} className={filterBtn.isActive ? "filter filter-btn active" : "filter filter-btn"} data-filter={filterBtn.id === "all" ? filterBtn.id : "." + filterBtn.id} onClick={(e) => this.toggleActiveBtn(filterBtn,e)}>{filterBtn.displayName}</a>
                                )
                                )}

                            </div>
                            <div className="container">
                                <div className="screenshots">
                                    <OwlCarousel
                                        className="owl-theme"
                                        // loop
                                        // margin={10}
                                        // nav
                                        items={3}
                                        dots
                                        mouseDrag={false}
                                        stagePadding={0}
                                    >
                                        {imageCarousel && imageCarousel.map((image, id) => (
                                            <img key={id} src={image} />
                                        ))}
                                    </OwlCarousel>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default ScreenshotsSection;

Here is the output of this:

Can anyone help me with this to solve this issue?