Bulma Navbar component is not showing - reactjs

Question

I am reading Bulma docs, took example to apply it on Codesandbox but the NavBar has a problem.
I imported Bulma as mentioned in docs, copied code, and I suppose Bulma is only css framework so no js to add.
The examples of Hero section that I am using can be found over here
The example provided with Hero head and Hero body and includes Nav bar is not working. The Navbar only as you see example here
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import "bulma/css/bulma.css";
function App() {
return (
<div className="App">
<section class="hero is-primary is-medium">
<div class="hero-head">
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item">
<img
src="https://bulma.io/images/bulma-type-white.png"
alt="Logo"
/>
</a>
<span
class="navbar-burger burger"
data-target="navbarMenuHeroA"
>
<span />
<span />
<span />
</span>
</div>
<div id="navbarMenuHeroA" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item is-active">Home</a>
<a class="navbar-item">Examples</a>
<a class="navbar-item">Documentation</a>
<span class="navbar-item">
<a class="button is-primary is-inverted">
<span class="icon">
<i class="fab fa-github" />
</span>
<span>Download</span>
</a>
</span>
</div>
</div>
</div>
</nav>
</div>
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>
</div>
</div>
<div class="hero-foot">
<nav class="tabs">
<div class="container">
<ul>
<li class="is-active">
<a>Overview</a>
</li>
<li>
<a>Modifiers</a>
</li>
<li>
<a>Grid</a>
</li>
<li>
<a>Elements</a>
</li>
<li>
<a>Components</a>
</li>
<li>
<a>Layout</a>
</li>
</ul>
</div>
</nav>
</div>
</section>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);