Модальное окно Bootstrap закрывается при нажатии на тело модального содержимого

У меня есть модальное окно начальной загрузки, оно закрывается, когда я нажимаю на любую часть модального тела, что не является естественным поведением модального окна. Мой код здесь:

<div data-toggle = "modal" data-target = "#myModal"
                  data-backdrop = "static" data-keyboard = "false"
                  className = "db-file curp"
                  key = {t.id}
                  onClick = {() =>{
                    const temp = this.props.selectTable(t);
                    this.props.getTableData(
                      this.props.jwt,
                      temp.payload.id
                    );
                      // window.open('./update-synonym', '_blank');
                    }
                  }
                >
                  <div className = "db-items">
                    <div className = "data-row">
                      <img src = "./images/Group 15.svg" alt = "file-icon" />
                      <p className = "text-center white-font">{t.name}</p>
                    </div>
                  </div>
                   <div className = "modal fade synonym-modal"
                    id = "myModal" tabIndex = "-1"
                    role = "dialog"
                    data-backdrop = "true"
                    aria-labelledby = "myModalLabel">
                    <div className = "modal-dialog" role = "document">
                      <div className = "modal-content">
                        {this.createTable()}
                      </div>
                    </div>
                   </div>
                </div>

И еще один фрагмент кода:

 $('#myModal').on('shown.bs.modal', () => {
  $('#myInput').focus()
});

как я могу отключить это поведение?