react-select2-wrapper not working in modal bootstrap 4

[dhanis-alghifari]

hello, anyone knows how this select2 can work properly in modal bootstrap 4, it looks like this.

and this is my code

 <div
            className="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered"
            role="document"
          >
            <div className="modal-content">
              <div className="modal-header">
                <h5 className="modal-title" id="exampleModalLongTitle">
                  Inquiry Klaim
                </h5>
                <button
                  type="button"
                  className="close"
                  data-dismiss="modal"
                  aria-label="Close"
                  onClick={handleModal}
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <hr className="my-8 col-auto p-0 ml-0 mb-0 mr-0 mt-3"/>
              <div className="modal-body" >
                        <div className="row p-0 m-0">
                          <div className="col-9 offset-md-1 p-0 m-0">
                              <div className="form-group row">
                                  <label htmlFor="Nama Bank" className="col-sm-3 col-form-label">Nama Bank</label>
                                      <div className="col-sm-9">
                                          <div className="row" style={{paddingLeft: 15, width: '100%'}} >
                                              <Select2 style={{width: '100%'}}
                                                  value={kodeBank}
                                                  name='kodeBank'
                                                  data={listBank}
                                                  onSelect={this.getCabang}
                                                  onChange={this.handleChange}
                                                  options={{

                                                      placeholder: 'Pilih Bank'
                                                  }}
                                              />
                                          </div>
                                      </div>
                              </div>

                              <div className="form-group row">
                                  <label htmlFor="Nama Cabang Bank" className="col-sm-3 col-form-label">Nama Cabang Bank</label>
                                  <div className="col-sm-9">
                                      <div className="row" style={{paddingLeft: 15, width: '100%'}} >
                                          <Select2 style={{width: '100%'}}
                                              value={kodeCabang}
                                              name='kodeCabang'
                                              data={listCabang}
                                              onSelect={this.handleChange}
                                              options={{
                                                  placeholder: 'Pilih Cabang Bank'
                                              }}
                                          />
                                      </div>
                                  </div>
                              </div>

                           </div>
              <div className="modal-footer">
                <button
                  type="button"
                  className="btn btn-default"
                  data-dismiss="modal"
                  onClick={handleModal}
                >
                  Close
                </button>
                <button type="button" className="btn btn-primary">
                  Save changes
                </button>
              </div>
            </div>
          </div>
        </div>

searched on stackoverflow nobody has discussed this issue.