How to enable toggle for Bootstrap with React

Question

I'm trying to use bootstrap (specifically a theme from bootswatch) in my react app. I'm sorry if this has been answered elsewhere, but I've searched for an answer for several hours to no avail.

Right now, on smaller screens the bootstrap navbar collapses to a hamburger menu. When I click it nothing happens. When I used material UI I had to create a drawer element and set its open-property to the current state, and have an on-click handler to change that state.

<Drawer open={this.state.isOpen} onClose={this.handleDrawerClose}>

Do I need to do something similar for bootstrap, and in that case, which property am I supposed to change? Currently my navbar looks like this:

import React, { useState } from 'react';

export default function Navbar() {
    return (
        <nav className="navbar navbar-expand-lg navbar-dark bg-primary">
            <a className="navbar-brand ml-3" href="#">
                Cocktail Nightz
            </a>
            <button
                className="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbar-toggle"
                aria-controls="nav-content"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span className="navbar-toggler-icon" />
            </button>

            <div className="collapse navbar-collapse" id="navbar-toggle">
                <ul className="navbar-nav mr-auto">
                    <li className="nav-item active">
                        <a className="nav-link" href="#">
                            Home <span className="sr-only">(current)</span>
                        </a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">
                            Cocktail
                        </a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">
                            Meal
                        </a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link" href="#">
                            About
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
    );
}

I really appreciate any help!