Toggle side nav not working properly

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>
    </>
    );
}