Expected behavior

Side nav should open and close properly when toggling.

Actual behavior

Side nav opens and then closes immediately when toggle once.

Resources (screenshots, code snippets etc.)

Video: https://www.awesomescreenshot.com/video/12825618?key=fc83c67c5a82c82a9cf55822a6b9e5c9

Code

function Sidenav({ isOpen, setIsOpen }) {
    const [_, setMode] = useState('side');
    const [backdrop, setBackdrop] = useState(false);

    return (
        <MDBSideNav
            isOpen={isOpen}
            backdrop={backdrop}
            getOpenState={(e) => {
                setIsOpen(e);
            }}
        >
            <MDBSideNavMenu>
                <MDBSideNavItem>
                    <Link to="/" className="sidenav-link">
                        Tasks
                    </Link>
                </MDBSideNavItem>
        </MDBSideNav>
    );
}


function Navbar({toggleSidenav}) {
    <MDBNavbar id="main-navbar" expand="lg" light fixed="top" bgColor="light">
        <MDBContainer fluid>
            <MDBBtn onClick={() => {toggleSidenav();}}>
                <MDBIcon icon="bars" size="lg" fas />
            </MDBBtn>
    </MDBContainer>
</MDBNavbar>
}

function App() {
     const [isNavOpen, setIsNavOpen] = useState(true);

    function toggleSidenav() {
        setIsNavOpen((prev) => !prev);
    }

    return (
    <>
        <header>
            <Sidenav isOpen={isNavOpen} setIsOpen={setIsNavOpen} />
            <Navbar toggleSidenav={toggleSidenav} />
        </header>
    </>
    );
}