我在Next.js上的应用程序中使用bootstrap 5.2 modals。我需要在成功返回请求后关闭模态窗口。我打开了属性为data-bs-toggle=“modal”的模态。使用文档和其他信息，我在组件中创建了一个函数：

export function LoginModal() {
    const loginModalRef = useRef();

    const hideModal = () => {
        const { Modal } = require("bootstrap");
        const myModal = new Modal(loginModalRef.current);

        console.log(1,myModal,Modal)
        myModal.hide();
    };

   function sendRequest() {
        // if response success
        hideModal();
    }

    return (
        <>
            <div ref={loginModalRef} id="login-modal" className="modal fade">
                <div className="modal-dialog modal-dialog-centered">
                    <div className="modal-content">
                      <svg className="close-icon position-absolute pointer" data-bs-dismiss="modal">
                            <use xlinkHref="/images/sprite.svg#close-icon"></use>
                        </svg>
                        <div className="modal-body">
                            MyModalContetn
                            <div onClick={sendRequest}>Send</div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
}

字符串
hide（）方法不起作用，模式窗口保持打开状态，没有错误
Bootstrap已插入_app.js

const App = ({ Component, pageProps }) => {
    // including bootstrap js
    useEffect(() => {
        require("bootstrap/dist/js/bootstrap.bundle.min.js");
    }, []);
/////

型
你能告诉我我做错了什么，以及它应该如何在我的情况下工作吗？