Как мне показать модалы в nextjs?

Question

У меня есть некоторые модалы, которые загружаются на страницу, и модальные триггеры. Я написал необходимый код jQuery, но модалы по-прежнему не отображаются.

Один из модальностей:

<div className="modal fade" id="howItWorks" tabIndex="-1" role="dialog" aria-labelledby="howItWorksTitle"
                 aria-hidden="true">
                <div className="modal-dialog modal-dialog-centered" role="document">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h3 className="modal-title" id="howItWorksTitle">How it works</h3>
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div className="modal-body">
                            <ul className="modal-list">
                                <li>Choose your time and schedule a session with an expert</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

Модальный триггер:

<div>
                <a href="#" className="how-it-works btn btn-large btn-muted" data-toggle="modal"
                   data-target="#howItWorks">
                    <span data-toggle="tooltip" title="Lorem Ipsum!" data-placement="top">
                        <img src={"../static/images/how-it-works-icon-blue.svg"}/>
                    </span>
                    How it works?
                </a>
            </div>

JQuery:

$(() => {
            $(".btn").on("click", function(e: any){
                e.preventDefault();

                $('.modal').toggleClass('is-visible');

            });
        });

Я ожидаю, что модал покажет, но ничего не произойдет, за исключением прокрутки страницы вверх.