Как выбрать строку и отобразить данные в модальном режиме?

Очень хорошо. Я пытаюсь показать данные таблицы в модале, и я не могу сделать модал, чтобы открыть модал со всеми данными билета, выбранными в таблице.

Я работаю с Boostrap 4 для визуальной части, и я хочу использовать обычный стол.

Мне удалось сделать то, что я хочу, с такими компонентами, как MuiDatatable или React-boostrap, но я не хочу использовать такие компоненты

, поэтому я переношу свои данные в массив данных:

class TicketsContainer extends React.Component {
  state = {
    data: []
  }

  constructor() {
    super();

    this.apiUrl = process.env.REACT_APP_API_URL || 'https://localhost:5050';
    this.getData = this.getData.bind(this);


  }

  componentDidMount() {
    this.getData();
  }


  getData() {
    Axios.get(`${this.apiUrl}/tickets`)
      .then(result => this.setState({ ...this.state, data: result.data }))
      .catch(error => alert(error.message));
  }

Здесь я отображаю данные и показываю их в таблице

{this.state.data.length && (
  <div>
    {this.state.data.map((ticket) => {
      return (
        <div className="card">
          <div className="card-header">
            <div className="row align-items-center">
              <div className="col">
                <form className="row align-items-center">
                  <div className="col-auto pr-0">
                    <span className="fe fe-search text-muted" />
                  </div>
                  <div className="col">
                    <input
                      type="search"
                      className="form-control form-control-flush search"
                      placeholder="Inngresa el #numero de ticket aqui..."
                    />
                  </div>
                </form>
              </div>
            </div>
            {/* / .row */}
          </div>
          <div className="table-responsive">
            <table className="table table-sm table-nowrap card-table table-hover ">
              <thead>
                <tr>
                  <th>
                    <div className="custom-control custom-checkbox table-checkbox">
                      <input
                        type="checkbox"
                        className="custom-control-input"
                        name="ordersSelect"
                        id="ordersSelectAll"
                      />
                      <label
                        className="custom-control-label"
                        htmlFor="ordersSelectAll"
                      >
                        &nbsp;
                      </label>
                    </div>
                  </th>
                  <th>N°: Ticket</th>
                  <th>Contrato</th>
                  <th>Empresa</th>
                  <th>Problema</th>
                  <th>Estado</th>
                  <th colSpan={2}>Tecnico Asignado</th>
                </tr>
              </thead>
              <tbody className="list">
                <tr id={ticket._id}>
                  <td>
                    <div className="custom-control custom-checkbox table-checkbox">
                      <input
                        type="checkbox"
                        className="custom-control-input"
                        name="ordersSelect"
                        id="ordersSelectOne"
                      />
                      <label
                        className="custom-control-label"
                        htmlFor="ordersSelectOne"
                      >
                        &nbsp;
                      </label>
                    </div>
                  </td>
                  <td className="orders-order">
                    {'#' + ticket.ticketNumber}
                  </td>
                  <td className="orders-product">{ticket.contract.name}</td>
                  <td className="orders-date">
                    {ticket.contract.compant.name}
                  </td>
                  <td className="orders-total">{ticket.issue}</td>
                  <td className="orders-status">
                    <div className="badge badge-soft-info">
                      {ticket.status}
                    </div>
                  </td>
                  <td className="orders-method">
                    {ticket.assignedTechnical}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      );
    })}
  </div>
)}

Как выбрать строку из таблицы и показать мне данные в модальном режиме?

Я тестировал несколько вещей и я не могу этого сделать