Nextjs react-bootstrap Modal not opening on top of page

Question

In my nextjs project, I have been trying to implement a Bootstrap Modal as a component similar to this vertically centered code example.

The project structure:

components 
 - modal.js
pages
 - index.js
 - about.js

From index.js I call the modal component:

 <Button variant="primary" onClick={() => setModalShow(true)}>
        Launch vertically centered modal
 </Button>
 <ModalMailingList show={modalShow} onHide={() => setModalShow(false)} />

This results in the modal NOT opening in a window on top of my page, but rather toggle the modal as a div inside the page.

Here is the working code, of the unwanted behavior.

How can I implement a modal component and make it open ON TOP of the page? (as in the original react-bootstrap code example)

SOLUTION UPDATE:

Had to add bootstrap.css to pages/_document.js

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

Answer 1

SOLUTION:

Had to add bootstrap.css to pages/_document.js

<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>