UPDATE: Here is a sandbox for my code. And I'm looking to end up with something like this.

I have a bootstrap table with these columns: name, expDate, stoplight. The value in the stoplight column is based on the date in the expDate column. If the expDate is within 7 days of today it's red, between 7 and 21 days it's Yellow, and otherwise Green, see logic below. If all I want is to display the words, Red, Yellow, Green it works fine. The part where I'm getting stuck is I want to display a 'stoplight', a red or yellow or green circle/button in the column. I have a working css but I cannot figure out how to apply a custom format to a specific cell. Any help is appreciated.

    <BootstrapTable
      keyField="street"
      columns={columns}
      data={rows}
      hover
      rowEvents={tableRowEvents}
      bordered={true}
      rowStyle={rowStyle}
    />

const Stoplight = (daysToExpDate) => { 
      if (daysToExpDate <= 7) {
        return "Red"; 
      } else if (daysToExpDate > 30) {
        return "Green"; 
      } else {
        return "Yellow"; 
      }
    };

And here is my rudimentary css that works by itself but not in the table.

.redlight {
  border-radius: 50%;
  color: red;
  background-color: red;
}
.greenlight {
  border-radius: 50%;
  color: green;
  background-color: green;
}
.yellowlight {
  border-radius: 50%;
  color: yellow;
  background-color: yellow;
}

This row style highlights the entire row, not just the cell in question.

const rowStyle = (row, rowIndex) => {
    const style = {};
    if (row.stoplight === "Red") {
      style.backgroundColor = "Red";
    } else if (row.stoplight === "Green") {
      style.backgroundColor = "Green";
    } else {
      style.backgroundColor = "Yellow";
    }

    if (rowIndex > 2) {
      style.fontWeight = "normal";
      style.color = "black";
    }

    return style;
  };