Datatable - Dynamically Changing Row Class Name

Enclosed snippet below.. the client function retrieves the dataset from the API. It returns a column colour which we want to be the background colour of the row ( i.e. all the logic of the highlighted rows is done on server ) I have removed some other code ( so I apolgise if there are references to unused object )

import React, { useState, useEffect } from 'react'; import { MDBIcon, MDBBtn, MDBInput, MDBDataTable, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter, MDBAlert } from "mdbreact"; import { GetCurrentUserRecords, AddUser } from '../dtos'; import client from "../context/dbLink";

function Teamtable(props) { const [tabledata, setTabledata] = useState([]); const [fetched, setFetched] = useState(false);

function editrecord(e) {
//Edits the Record here !

}

function deleterecord(e) {
//Removes the record here 
}

function showlog(e) {
// Show the users log
}

useEffect(() => {
    if (!fetched) {
        setFetched(true);
        client.userName = props.currentuser.user;
        client.password = props.currentuser.password;
        client.post(new GetCurrentUserRecords()).then((c) => {
            var rs = [];
            c.forEach((d) => {
                rs.push({ icon: <MDBIcon size="2x" icon={d.icon} className={d.colour} ></MDBIcon>,className:d.colour,  name: d.name, outcome: d.outcome, returndate: d.returnDate, lastsubmitted: d.lastSubmittedTime, color: d.colour, buttons: <><MDBBtn rounded onClick={editrecord(d.id)}><MDBIcon size="2x" icon='pencil'></MDBIcon></MDBBtn><MDBBtn  rounded onClick={showlog(d.id)}><MDBIcon size="2x" icon='history'></MDBIcon></MDBBtn><MDBBtn rounded onClick={deleterecord(d.id)}><MDBIcon size="2x" icon='trash'></MDBIcon></MDBBtn> </> })
            });
            setTabledata({
                columns: [
                    {
                        label: ' ',
                        field: 'icon',


                    },
                    {
                        label: 'Name',
                        field: 'name',
                    },
                    {
                        label: 'Outcome',
                        field: 'outcome',


                    },
                    ,
                    {
                        label: 'Return Date',
                        field: 'returndate',


                    },
                    {
                        label: 'Last Submitted',
                        field: 'lastsubmitted',


                    },  {
                        label: '  ',
                        field: 'buttons',


                    },
                ],
                rows: rs
            });
        }, (d) => {
        });
    };

});





return (
    <>
         <p className="h4 ">Team Status</p>
        <MDBDataTable noBottomColumns={true} paging={false} small={true} hover data={tabledata} />
    </>


)

}

export default Teamtable;

I think the answer is incomplete or useless