Hi, I've been trying to add React Bootstrap to a Next.js project and I've encountered a problem where I'm following the documentation on implementing a navbar, but however Next.js is throwing issues with finding things like Navbar.Brand or Navbar.Toggle

My component's code is

import {Nav, Container, Navbar} from "react-bootstrap";
import Link from 'next/link';

const Navigation = () => {
    return(
        <nav>
            <Navbar collapseOnSelect expand="lg" className="navigation">
                <Container>
                    <Navbar.Brand>
                        <img src="brand.svg" className="logo"></img>
                    </Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav.Link as="span">
                            <Link href="/about"><a>About Us</a></Link>
                        </Nav.Link>
                        <Nav.Link as="span">
                            <Link href="/products"><a>About Us</a></Link>
                        </Nav.Link>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        </nav>
    )
}

And this is the error stacktrace