ReactJS - why does it lag when i switch between tabs within my component?

Question

I am working on a web app that uses ReactJS as the frontend. I realised that when I switch between tabs in my component, it is very slow and tends to lag (animation is not smooth). I cant think of a reason why that is the case, as my component does not seem to be re-rendering unnecessarily. Below is a snippet of my code.

class SalesProjectDetail extends Component {

    state = {
    }


    componentDidMount() {
        this.props.initial()
    };

    requirement = (project) => {
        console.log('hi')
        let component = (
            <React.Fragment>
                <RequirementCreateDrawer id={this.props.match.params.id} />
                <RequirementDeleted requirements={project.requirements.filter(requirement => requirement.status === 'inactive')} />
                <RequirementTimeline requirements={project.requirements.filter(requirement => requirement.status === 'active')} />
            </React.Fragment>
        )
        if (this.props.loadingComponent === 'requirement') {
            return (
                <Spin size='large'>
                    {component}
                </Spin>
            )
        }
        return component
    }

    quotation = (project, type) => {
        let component = (type == 'PQ') ?
            (<React.Fragment>
                <QuotationCreateDrawer type="PQ" id={this.props.match.params.id} />
                <QuotationDeleted quotations={project.quotations.filter(quotation => quotation.direction == 'pq').filter(quotation => quotation.status == 'inactive')} type='pq' />
                <QuotationTable quotations={project.quotations.filter(quotation => quotation.direction == 'pq').filter(quotation => quotation.status == 'active')} type='pq' />
            </React.Fragment>)
            :
            (<React.Fragment>
                <QuotationCreateDrawer type="SQ" id={this.props.match.params.id} />
                <QuotationDeleted quotations={project.quotations.filter(quotation => quotation.direction == 'sq').filter(quotation => quotation.status == 'inactive')} type='sq' />
                <QuotationTable quotations={project.quotations.filter(quotation => quotation.direction == 'sq').filter(quotation => quotation.status == 'active')} type='sq' />
            </React.Fragment>)

        if (this.props.loadingComponent === 'quotation') {
            return (
                <Spin size='large'>
                    {component}
                </Spin>
            )
        }
        return component
    }

    notation = (project) => {
        let component = (
            <React.Fragment>
                <NotationList notations={project.notations.filter(notation => notation.status == 'active')} id={project.sales_project_id} />
                <NotationDeleted notations={project.notations.filter(notation => notation.status == 'inactive')} />
            </React.Fragment>
        )
        if (this.props.loadingComponent === 'notation') {
            return (
                <Spin size='large'>
                    {component}
                </Spin>
            )
        }
        return component
    }

    render() {
        console.log('bad')
        const project = this.props.project
        return (
            this.props.loading['salesproject'] === false ?
                <React.Fragment>
                    <Card style={{ height: 'auto', padding: 0, margin: 0 }}>
                        <Row>
                            <Col span={4}>
                                {this.props.loadingComponent === 'project' ?
                                    <Spin size='large'>
                                        <ProjectCard project={project} />
                                    </Spin>
                                    : <ProjectCard project={project} />}
                            </Col>
                            <Col span={20} style={{ backgroundColor: '#fff', padding: '1% 2%' }} >

                                <Tabs defaultActiveKey="0">
                                    <TabPane tab={<span><GithubOutlined />Activities</span>} key="0">
                                        <ActivitiesTimeline project={project} />
                                    </TabPane>
                                    <TabPane
                                        tab={<span><AppleOutlined />Requirements</span>}
                                        key="1"
                                    >
                                        {this.requirement(project)}
                                    </TabPane>


                                    <TabPane
                                        tab={<span><AndroidOutlined />Quotations</span>}
                                        key="2"
                                    >
                                        <Tabs defaultActiveKey="0" tabPosition="left">

                                            <TabPane tab={<span><ClockCircleOutlined /></span>} key="0" >
                                                <QuotationTimeline quotations={project.quotations} />
                                            </TabPane>

                                            <TabPane tab="PQ" key="1">
                                                {this.quotation(project, 'PQ')}
                                            </TabPane>

                                            <TabPane tab="SQ" key="2">
                                                {this.quotation(project, 'SQ')}
                                            </TabPane>
                                        </Tabs>
                                    </TabPane>


                                    <TabPane
                                        tab={<span><WindowsOutlined />Notations</span>}
                                        key="3"
                                    >
                                        {this.notation(project)}
                                    </TabPane>
                                </Tabs>
                            </Col>
                        </Row >
                    </Card>
                    <WorkflowObjectComponent
                        workflow_class={project.workflow_id}
                        {...this.props}
                    />
                </React.Fragment>

                :

                <div style={{ textAlign: 'center' }}><Spin size='large' /></div>
        )
    }

}

const mapStateToProps = state => ({
    loading: state.api.loading,
    project: state.api.project,
    loadingComponent: state.api.loadingComponent
})

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        initial: () => dispatch({ type: 'SALES_PROJECT_DETAIL', id: ownProps.match.params.id })
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(SalesProjectDetail);

I noticed that the lags happened after I used Redux (Redux Saga) to help with my API call and my loading screens. However, since my mapStateToProps are all necessary store states, I do not see any unnecessary re-rendering and was hoping to get some advice on how to continue, it lags when I switch between the tabs, and the child components within the tabs do not use any Redux dispatches, nor any mapStateToProps, as the data they use within the child component is sent in as props from the parent component (the one shown above -> the one that does the dispatch to get the data from the api).

All help is appreciated, I know that my question might be a bit vague but I really do not know what is causing this lag, and hopefully I can get some help here, or to point me in the correct direction, thanks all!