I'm new in React Frontend developing. I'm trying to add a temporary drawer to my Material-UI NavBar. I've add a drawer in my code:

class Navbar extends Component {

    render() {

        const { authenticated } = this.props;

        const [open, setOpen] = useState(false);

        const handleDrawer = () =>{

           setOpen(true)

        }

        return (

            <AppBar position="fixed">

                <Toolbar className="nav-container">

                    {authenticated ? (

                        <Fragment>

                            <IconButton edge="start" onClick={handleDrawer} >

                                <Menu/>

                            </IconButton>

                            <Drawer

                                anchor='left'

                                open={open}

                                onClose={()=> setOpen(false)}

                                >

                                    <h3> Drawer</h3>

                            </Drawer>

                            <NewPost/>

                            <Link to="/">

                                <MyButton tip="Home">

                                    <HomeIcon color = "disabled"/>

                                </MyButton>

                            </Link>

                            <Link to="/chats">

                                <MyButton tip="Chats">

                                    <ChatIcon color = "disabled"/>

                                </MyButton>

                            </Link>

                            <Notifications />

                        </Fragment>

                        



                    ):(

                        <Fragment>

                            <Button color="inherit" component={Link} to="/login">Login</Button>

                            <Button color="inherit" component={Link} to="/signup">Singup</Button>

                            <Button color="inherit" component={Link} to="/">Home</Button>

                            {/* <Button color="inherit" component={Link} to="/user">Profile</Button>*/}

                        </Fragment>

                    )}

                </Toolbar>

            </AppBar>



            

        )

    }

}



Navbar.propTypes = {

    authenticated:  PropTypes.bool.isRequired

}



const mapStateToProps = state =>({

    authenticated: state.user.authenticated

})



export default connect(mapStateToProps)(Navbar)

But this error appeared:

React Hook "useState" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function

So, I've create a constructor to handle this (before render):

constructor(props) {

    super(props);

    this.state = {

      open: false

    };

  }

And when I want to change the state, I've use:

this.setState({ open: true })

But, when I triggered the Drawer (clicking the button),It does not open. What can I do?