Модальность Bootstrap5 не отображается в React.js после нажатия на кнопку

Я бы посоветовал вам использовать react-bootstrap это намного проще, и javascript был сделан за вас

React-Bootstrap заменяет Bootstrap JavaScript

Каждый компонент был создан с нуля как компонент React, без ненужных зависимостей, таких как jQuery.

Для начала просто установите пакет npm install react-bootstrap bootstrap

посмотрите на этот пример

import { Modal, Button } from "react-bootstrap";
function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant = "primary" onClick = {handleShow}>
        Launch demo modal
      </Button>

      <Modal show = {show} onHide = {handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant = "secondary" onClick = {handleClose}>
            Close
          </Button>
          <Button variant = "primary" onClick = {handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

render(<Example />);

Блог Гаурава Сингхала @PluralSight

Вы должны использовать контролируемые компоненты, которые используют внутреннее состояние для установки значения и изменить поведение компонента. Библиотеки, такие как jQuery напрямую манипулирует DOM, тогда как компоненты React используют Виртуальный DOM для изменения фактического DOM в браузере. Использование jQuery для изменить поведение вашего компонента возможно. Все равно это приведет к неожиданные результаты и затрудняют отладку. Реагировать на Bootstrap реализует каждый компонент в чистом React, так что вам не о чем беспокоиться о зависимости Bootstrap от jQuery

чтобы проверить их страницу документации (реакции-бутстрап), вот ссылка, по которой вы можете перейти/перейти на реагировать-бутстрап

Bootstrap 5 больше не зависит от jQuery, поэтому вам не нужна сторонняя библиотека, такая как react-bootstrap, чтобы использовать Bootstrap в React. Например, вы можете использовать атрибуты data-bs- в разметке или создать функциональный компонент для модального окна Bootstrap с методами для отображения/скрытия модального окна...

function ModalExample() {
    const modalRef = useRef()
    
    const showModal = () => {
        const modalEle = modalRef.current
        const bsModal = new bootstrap.Modal(modalEle, {
            backdrop: 'static',
            keyboard: false
        })
        bsModal.show()
    }
    
    const hideModal = () => {
        const modalEle = modalRef.current
        const bsModal= bootstrap.Modal.getInstance(modalEle)
        bsModal.hide()
    }
    
    return(
        <div className = "addEmployee">
            <button type = "button" className = "btn btn-primary" onClick = {showModal}>Add Employee</button>
            <div className = "modal fade" ref = {modalRef} tabIndex = "-1" >
             <div className = "modal-dialog">
                <div className = "modal-content">
                  <div className = "modal-header">
                    <h5 className = "modal-title" id = "staticBackdropLabel">Modal title</h5>
                    <button type = "button" className = "btn-close" onClick = {hideModal} aria-label = "Close"></button>
                  </div>
                  <div className = "modal-body">
                    ...
                  </div>
                  <div className = "modal-footer">
                    <button type = "button" className = "btn btn-secondary" onClick = {hideModal}>Close</button>
                    <button type = "button" className = "btn btn-primary">Understood</button>
                  </div>
                </div>
              </div>
            </div>
        </div>
    )
}

Демонстрация обоих способов