I am trying to mimic this Navbar:

In React-Bootstrap, I am thinking of having two Navbars both on top of each other, for this I have added these files:

MainNav.tsx

import React from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';

export default function MainNav() {
  return (
    <Navbar expand="md" className="justify-content-center navbar-top" fixed="top">
      <Nav className="me-auto">
        <Navbar.Brand href="#home">Minimal Blog</Navbar.Brand>
      </Nav>
    </Navbar>
  )
}

Navbar.tsx:

import React from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';

export default function NavigationBar() {
  return (
    <Navbar expand="md" className="justify-content-center navbar-top" fixed="top">
        <Nav className="me-auto">
          <Nav.Link href="#home">Blog</Nav.Link>
          <Nav.Link href="#features">About</Nav.Link>
        </Nav>
    </Navbar>
  )
}

And in the App.tsx, I am just adding these:

<MainNav />
<Navbar />

But seems like they are super imposing on each other, I have created a code sandbox here: https://codesandbox.io/s/peaceful-sun-se4ni?file=/src/App.tsx for Replication, any help/hints in making the desired output possible will be helpful.

EDIT 1: I have added two Navbars, and utilised the z-index property, but somehow, I am not able to align contents together. Here is the sandbox link: https://codesandbox.io/s/peaceful-sun-se4ni?file=/src/App.tsx