React JS Bootstrap not applied

I am building a new ReactJS app and tried to use react-bootstrap for the UI. I essentially installed yarn add react-bootstrap bootstrap yarn add jquery popper.js" to have everything installed. My index.js` looks as follows:

// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.css';
import $ from 'jquery';
import Popper from 'popper.js';

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/App';
import * as serviceWorker from './serviceWorker';
import './index.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

App.js is quite straightforward:

import React from 'react';
import AppHeader from "./layout/AppHeader";
import RouterOutlet from "../router/Router";
import AppFooter from "./layout/AppFooter";

function App() {

  return (
      <div>
          <div className="wrap">
            <AppHeader />
            <div className="container">
                <RouterOutlet />
            </div>
          </div>
          <AppFooter />
      </div>
  );
}

export default App;

The interesting part now is the header not working as expected, its containing the NavBar

import React from 'react';
import NavDropdown from 'react-bootstrap/NavDropdown'
import Navbar from "react-bootstrap/Navbar";

class AppHeader extends React.Component {
    render () {
        return (
            <Navbar variant="dark" sticky="top">
                <Navbar.Brand>
                    <img
                        src="/logo192.png"
                        width="30"
                        height="30"
                        className="d-inline-block align-top"
                        alt=" "/>
                </Navbar.Brand>
                <NavDropdown bg="black" title="Menu" id="collasible-nav-dropdown" style={{color: "#5299d3"}}>
                    <NavDropdown.Item href="/">Home</NavDropdown.Item>
                    <NavDropdown.Item href="/time">Time</NavDropdown.Item>
                    <NavDropdown.Item href="/login">Login</NavDropdown.Item>
                    <NavDropdown.Item href="/logout">Logout</NavDropdown.Item>
                </NavDropdown>
            </Navbar>
        );
    }
}

export default AppHeader

This is the Footer

import * as React from 'react';

class AppFooter extends React.Component {
    render() {
        return (
            <footer className="footer">
                <div className="container">
                    <p className="pull-left">&copy; My Company</p>
                    <p className="pull-right">asd</p>
                </div>
            </footer>
        );
    }
}

export default AppFooter;

However the bootstrap styles are not applied, the bar is white without any background at all. Also other things such as "pull-right" classes in the footer don't work. I can see in the browser though that the CSS is loaded as a inline CSS file.

Question: why are the styles not applied to my components so far?