Next.js + 引导程序 5 – 手动关闭模式

问：

我在Next.js上的应用程序中使用bootstrap 5.2模式。我需要在成功返回请求后关闭模式窗口。 我使用属性 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");
    }, []);
/////

你能告诉我我做错了什么，以及它应该如何在我的案例中发挥作用吗？提前非常感谢