How to override default color of React Material-ui table row when selected with checkbox

I am using the material-ui table. I want to be able to change the selected row's background color (when the checkbox is checked). There is a component to handle the click / selection. . it is passed in thru the props from the parent, which has the 'handleSelected component. .

there is a parent js, which implements the TableBody and has the callback function to handle the event. I think, from research, that this may be the place to change the default backgroundColor of the selected row ? How to do so , is the question though.

I have this link from which I've been working/learning https://material-ui.com/components/tables/

PARENT:

const handleSelected = useCallback((selected, count, total) => {
    },[]);

return (
    <TableContainer>
        <Table>
           <xxTableHead
                columns={columns}
                onSelectAllClick={onAllRowsSelected}
                numSelected={0}
                rowCount={steps.length}
            />
            <xxTableBody
                columns={columns}
                deviceId={deviceId}
                optimise={optimise}
                **onSelected**={handleSelected}
            />
        </Table>
    </TableContainer>
    )
 }
 export default React.memo(OptimiserTable);

CHILD:

The tableBody js file.. (I'm new to React)

function xxTableBody(props) {
      const {xId, columns, setX, onSelected} = props;
      const [selected, setSelected] = useState([]);
      ..


      const handleClick = (event, name) => {
      const selectedIndex = selected.indexOf(name);

      let newSelected = [];

      if (selectedIndex === -1) {
           newSelected = newSelected.concat(selected, name);
       } else if (selectedIndex === 0) {
           newSelected = newSelected.concat(selected.slice(1));
       } else if (selectedIndex === selected.length - 1) {
           newSelected = newSelected.concat(selected.slice(0, -1));
       } else if (selectedIndex > 0) {
           newSelected = newSelected.concat(
              selected.slice(0, selectedIndex),
              selected.slice(selectedIndex + 1),
           );
       }
       onSelected(selected, selected.length, steps.length);
  };

 <TableRow
    <TableCell  key={'select'}  padding="checkbox"  >
         <Checkbox
             checked={isItemSelected}
             inputProps=aria-labelledby
             style=
             onClick={(event) => handleClick(event, step.workStepId)}
          />
   </TableCell>