I am using this libraries in my html file ;

<script src="./scripts/jquery-3.5.1.slim.min.js"></script>
<script src="./scripts/bootstrap.min.js"></script>
<script src="./scripts/popper.min.js"></script>

and here is my js file tags ;

<div className="modal" id="dlgOpen" tabIndex="-1" aria-hidden="true">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h5 className="modal-title" id="exampleModalLabel">
                Open Report
              </h5>
              <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div className="modal-body">
              <h2>Select Report:</h2>
              <div className="list-group">
                <button
                  type="button"
                  className="list-group-item list-group-item-action"
                  onClick={() => onSelectReport('assets/CustomersTable.rdlx-json')}
                >
                  Customers Report
                </button>
                <button
                  type="button"
                  className="list-group-item list-group-item-action"
                  onClick={() => onSelectReport('assets/TaxiDrives.rdlx-json')}
                >
                  Taxi Drives Report
                </button>
              </div>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" data-dismiss="modal">
                Close
              </button>
            </div>
          </div>
        </div>
      </div>

I want to show my modal like this ;
popup

But all texts are invisible. I’m not sure what causes this. I will be glad if you help