Как включить переключение для Bootstrap с React

Question

Я пытаюсь использовать bootstrap (в частности, тему из bootswatch) в моем приложении реакции. Извините, если на этот вопрос ответили в другом месте, но я искал ответ в течение нескольких часов, но безрезультатно.

Прямо сейчас на маленьких экранах панель навигации bootstrap сворачивается в меню гамбургеров. Когда я нажимаю, ничего не происходит. Когда я использовал пользовательский интерфейс материала, мне нужно было создать элемент выдвижного ящика и установить его открытое свойство в текущее состояние, и иметь обработчик по нажатию, чтобы изменить это состояние.

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

Нужно ли что-то делать похоже на bootstrap, и в таком случае, какое свойство я должен изменить? В настоящее время моя навигационная панель выглядит так:

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>
    );
}

Я очень ценю любую помощь!