Expected behavior Expect NavLink to become active=false

Actual behavior Remains active regardless of adding active or not or active=false

Clicking between the tabs you can see the correct state values are there.

Even if you try to hard code false into active=false it still shows the link as being active.

Further, I tried MDBNavItem - active=false as well no luck

Am I doing something wrong?

Resources (screenshots, code snippets etc.)

import React, { useState } from "react"; import { MDBContainer, MDBNav, MDBNavLink, MDBNavItem, MDBTabContent, MDBTabPane } from "mdbreact";

const Lectures = () => {

const [activePill, setActivePill] = useState('1')
const togglePills = (tab) => e => {
    //e.preventDefault();
    setActivePill(tab)
}

return (
    <>
        <h1 className="mt-5 text-center">Test</h1>

        <MDBContainer>

            {
                // NavBar
            }

            <MDBNav pills color="secondary" className="nav-justified mt-5">
                <MDBNavItem>

                    <MDBNavLink
                        to="#tab1"
                        onClick={ togglePills("1") }
                        // active={ activePill === '1' }
                        active={ false }
                    >
                        Tab 1
                    </MDBNavLink>
                </MDBNavItem>

                <MDBNavItem>
                    <MDBNavLink
                        to="#tab2"
                        active={ activePill === '2' }
                        onClick={ togglePills("2") }
                    >
                        Tab 2
                    </MDBNavLink>
                </MDBNavItem>

            </MDBNav>


            {
                // Tabs
            }
            <MDBTabContent activeItem={ activePill }>
                <MDBTabPane tabId="1">
                    <p>Tab 1</p>
                    <p> Tab 1 = { (activePill === '1').toString() }</p>
                    <p> Tab 2 = { (activePill === '2').toString() }</p>
                </MDBTabPane>
                <MDBTabPane tabId="2">
                    <p>Tab 2</p>
                    <p> { activePill === '2' }</p>
                    <p> Tab 1 = { (activePill === '1').toString() }</p>
                    <p> Tab 2 = { (activePill === '2').toString() }</p>
                </MDBTabPane>
            </MDBTabContent>

        </MDBContainer>
    </>

);

};

export default Lectures;