Auto increment column number in html table boostrap 5?

I am trying to auto increment column with header ID, using reactjs bootstrap5. The table loads data from a database.

<table className="table table-striped">
            <thead>
              <tr>
                <th>ID</th>
                <th>Tick</th>
                <th>Percent</th>
                <th>Ratio</th>
                <th>Broke</th>
                <th />
              </tr>
              </thead>
              <tbody>
                { this.props.sett_list.map(dca_sett_list_item => (
                  <tr key={sett_list_item.id}>
                    <td>{sett_list_item.id}</td>
                    <td>{sett_list_item.ticker}</td>
                    <td>{sett_list_item.percent_down}</td>
                    <td>{sett_list_item.pe_ratio}</td>
                    <td><button className='btn btn-primary btn-sm'>BROKE</button></td>
                    <td><button onClick={this.props.deleteSettings_T.bind(this, sett_list_item.id)}className='btn btn-danger btn-sm'>Delete</button></td>
                  </tr>
                )) }
              </tbody>
          </table>

I found an answer which directs towards using css:

table {
    counter-reset: tableCount;     
}
.counterCell:before {              
    content: counter(tableCount); 
    counter-increment: tableCount; 
}

Do I make a custom.css and add the above code to get the functionality? Or is there a better way to do this in bootstrap 5?