Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop') while using bootstrap 5 modal in react

Question

Error while trying to show bootstrap 5 modal using javascript.

  const handleClick = (e) => {
    e.preventDefault();
    const modalElement = document.getElementById('editUserModal');
    const modal = Modal.getOrCreateInstance(modalElement);
    modal.show();
  };

This is the code for modal

const EditModal = () => {
  return (
    <>
      <div
        className="modal fade "
        id="editUserModal"
        aria-hidden="true"
        tabIndex="-1"
      >
        <div className="modal-dialog modal-dialog-centered">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalToggleLabel">
                Modal 1
              </h5>
              <button
                type="button"
                className="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div className="modal-body">
              Show a second modal and hide this one with the button below.
            </div>
            <div className="modal-footer">
              <button
                className="btn btn-primary"
                data-bs-target="#exampleModalToggle2"
                data-bs-toggle="modal"
                data-bs-dismiss="modal"
              >
                Open second modal
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
export default EditModal;

This is the error

Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
    at Modal._initializeBackDrop (modal.js:158:39)
    at new Modal (modal.js:69:27)
    at Modal.getOrCreateInstance (base-component.js:65:41)
    at HTMLAnchorElement.<anonymous> (modal.js:364:22)
    at HTMLDocument.handler (event-handler.js:118:19)

I don't want to rely on the react-bootstrap library for this. There was another similar question for the same problem, but it doesn't have a fix either.

Edit: I am attaching the parent components that holds EditModal

import ProfileCard from '../../components/profileCard/ProfileCard';
import EditModal from '../../components/editModal/EditModal';
import { Modal } from 'bootstrap';

const Home = () => {
  const handleClick = (e) => {
    e.preventDefault();
    const modalElement = document.getElementById('editUserModal');
    const modal = Modal.getOrCreateInstance(modalElement);
    modal.show();
  };

  return (
    <>
      <a
        className="btn btn-primary"
        data-bs-toggle="modal"
        onClick={handleClick}
        role="button"
      >
        Open first modal
      </a>
      <div className="container">
        <div className="row mt-5">
          <div className="col-md-3"></div>
        </div>
      </div>
      <EditModal />
    </>
  );
};

export default Home;

Answer 1

Try the following to explicitly set the backdrop:

const handleClick = (e) => {
  e.preventDefault();
  const modalElement = document.getElementById('editUserModal');
  const modal = new Modal(modalElement, {
    backdrop: false,
    keyboard: true,
    focus: true
  });
  modal.show();
};