I have been trying to put a Navbar into a React Project using reactstrap. But the Navbar is not showing just the h1 in the NavbarBrand is rendered for some reasons. I tried to change the css styling, copy and pasted other example Navbars from different websites and tried other kinda similar solutions from here but nothing worked. I am using React version 17.0.2 and reactstrap version 8.9.0.

This is my Navbar Component:

import React, { Component } from 'react';
import { Navbar, NavbarBrand, Nav, NavbarToggler, Collapse, NavItem } from 'reactstrap';
//import { NavLink } from 'react-router-dom';

class Header extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isNavOpen: false
        };
        this.toggleNav = this.toggleNav.bind(this);
    }

    toggleNav() {
        this.setState({
            isNavOpen: !this.state.isNavOpen
        });
    }

    render() {

        return(
            <Navbar bg="dark" variant="dark">
                <div className="container">
                    <NavbarToggler onClick={this.toggleNav} />
                    <NavbarBrand href="/">
                        <h1>Navbar</h1>
                    </NavbarBrand>
                    <Collapse isOpen={this.state.isNavOpen} navbar>
                        <Nav navbar>
                            <NavItem>
                                <p>Test</p>
                            </NavItem>
                        </Nav>
                    </Collapse>
                </div>
            </Navbar>
        );
    }
}

export default Header;

How the navbar looks

I am rather new to React and Javascript overall i hope someone can help me.