I am fairly new to react and trying to add a row in an existing table when a button is pressed . The table row is added normally just the onlick functions are printing as normal html text not as code (please refer to the image below).

for adding the row this code I am using .

 const add_Rg_expense=function(e){
  let i = number_expenses
  i++
  let tempstring1 = `{decrease_func(e.target.value)}} value={${i}}  >-`
  let tempstring2 = `{increase_func(e.target.value)}} value={${i}}  >+`
  let custom_html_content = `<tr className='Rg_expenses_table_row'>
              <td>Food Expenses</td>
              <td><button className='local_button' onClick={(e)=>${tempstring1}</button></td>
              <td id='valueofexpense_3'>0</td>
              <td>Rs</td>
              <td><button className='local_button' onClick={(e)=>${tempstring2}</button></td>
    </tr>`
    const table_id = document.querySelector('#Rg_expenses_table')
    table_id.innerHTML+=custom_html_content
    setNumberExpenses(i)
    return
}

Please advice , what I am missing and what is the best way to sort out this issue ?

I have trying to add it as a state variable but that was just overcomplicating things , as the existing 3 rows are static . I also tried multiple approaches like appendchild() , insertRow() . I just want this row to work as the other ones are working .