Discussion on: Using Bootstrap 5 with React

[lgk-bsw]

I did something similar with the Modal component. But I also had to include an event listener when the user clicks outside of the modal to close it:

    useEffect(() => {
        const myModal = modalRef.current as unknown as Element
        let bsModal = Modal.getInstance(myModal)

        if (!bsModal) {
            bsModal = new Modal(myModal)
            bsModal.hide()
            setModal(false)

            // When the user clicks on underlay to close the modal
            myModal.addEventListener("hide.bs.modal", () => {
                setModal(false)
            })
        }
        else {
            modal ? bsModal.show() : bsModal.hide()
        }
    }, [modal])