Помогите правильно написать события

Имеется вот такой код

function body (props) {
const { items } = props
    console.log(items)
    return <tbody>
        {items.map(it => <tr onClick={openDetailTable}>
             <td>{it.source_id}</td>
             <td>{it.partner_id}</td>
             <td>{it.profit}</td>
             <td>{it.fraud_profit}</td>
             <td>{it.fraud_count_orders}</td>   
        </tr>
        )}
        <style> {`table {width: 100%;} .detail{display:none;}`}</style>
    </tbody>        
}

Нужно написать события, которое при клике на строку таблицы, добавит под ней еще одну таблицу(эффект аккордеона), при этом нужно получить данные с базы данных, тоесть, отправить запрос в бд по source_id этой строки и получить ответ