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.