Не работает bootstrap (js) в react-приложении

Есть react-приложение к нему подключен bootstrap (и css, и js), css работает отлично, а js (dropdown) - нет, т.е. при клике по dropdown, ничего не происходит.

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "./index.css";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

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

reportWebVitals();

Компонент в котором используется dropdown

import React from "react";

const Main = () => {
    return (
        <div className="aaa">
            <div className="dropdown">
                <button
                    className="btn btn-secondary dropdown-toggle"
                    type="button"
                    id="dropdownMenuButton1"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                >
                    Dropdown button
                </button>
                <ul
                    className="dropdown-menu"
                    aria-labelledby="dropdownMenuButton1"
                >
                    <li>
                        <a className="dropdown-item" href="/#">
                            Action
                        </a>
                    </li>
                    <li>
                        <a className="dropdown-item" href="/#">
                            Another action
                        </a>
                    </li>
                    <li>
                        <a className="dropdown-item" href="/#">
                            Something else here
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    );
};

export default Main;

Результат