burger menu bulma react

1const [isActive, setisActive] = React.useState(false); 
2<nav className="navbar" role="navigation" aria-label="main navigation">
3        <div className="navbar-brand">
4          <a
5            onClick={() => {
6              setisActive(!isActive);
7            }}
8            role="button"
9            className={`navbar-burger burger ${isActive ? "is-active" : ""}`}
10            aria-label="menu"
11            aria-expanded="false"
12            data-target="navbarBasicExample"
13          >
14            <span aria-hidden="true"></span>
15            <span aria-hidden="true"></span>
16            <span aria-hidden="true"></span>
17          </a>
18        </div>
19        <div
20          id="navbarBasicExample"
21          className={`navbar-menu ${isActive ? "is-active" : ""}`}
22        >
23          <div className="navbar-start">
24            <a className="navbar-item">Home</a>
25            <a className="navbar-item">Documentation</a>
26          </div>
27        </div>
28   </nav>
29