Цель данных и переключение данных Bootstrap не работают в приложении ReactJS

Вот мой JSX компонента поиска

 return(
       <div class = "col-md-2">
                    <div class = "form-group">
                        <button class = "btn btn-md btn-primary" data-toggle = "modal" data-target = "#myModal" >Advanced Search</button>
                    </div>
                </div>
         <div class = "modal inmodal" id = "myModal" tabindex = "-1" role = "dialog" aria-hidden = "true">
                <div class = "modal-dialog">
                    <div class = "modal-content animated bounceInRight">
                        <div class = "modal-header">
                            <button type = "button" class = "close" data-dismiss = "modal"><span aria-hidden = "true">&times;</span><span class = "sr-only">Close</span></button>
                            <h4 class = "modal-title"> Advanced Search <i class = "fa fa-search"></i> </h4>
                        </div>
                        <div class = "modal-body">
                            <div class = "row">
                                <div class = "col-6">
                                    <div class = "form-group"><input type = "text" placeholder = "Select Geography..." class = "form-control top_search_geo" /></div>
                                </div>
                                <div class = "col-6">
                                    <div class = "form-group"><input type = "text" placeholder = "Select Specialty..." class = "form-control top_search_spec" /></div>
                                </div>
                            </div>
                            <div class = "row">
                                <div class = "col-6">
                                    <div class = "form-group"><input type = "text" placeholder = "Select Affiliations..." class = "form-control top_search_aff" /></div>
                                </div>
                                <div class = "col-6">
                                    <div class = "form-group"><input type = "text" placeholder = "Select Payer..." class = "form-control top_search_payer" /></div>
                                </div>
                            </div>
                        </div>
                        <div class = "modal-footer">
                            <button type = "button" class = "btn btn-primary" data-dismiss = "modal">Search</button>
                        </div>
                    </div>
                </div>
            </div>

Я уже импортировал 3 необходимых файла в свой файл index.js:

    import 'bootstrap/dist/js/bootstrap.bundle.min.js';
    import 'bootstrap/dist/css/bootstrap.min.css';
    import 'jquery/dist/jquery.min.js';

При нажатии кнопки расширенного поиска ожидаемым поведением должен быть новый ящик, скользящий вниз, но переключатель не срабатывает.

Моя версия начальной загрузки: "bootstrap": "^ 4.6.0" Моя версия jquery: "jquery": "^ 3.6.0"