Estoy usando la tabla de material ui para mapear los datos de la API, pero cada fila de la tabla tiene una barra de progreso. Quiero poder dar a la barra de progreso diferentes colores. Aquí está el código de abajo...

 const BorderLinearProgress = withStyles((theme) => ({ bar: { borderRadius: 5, backgroundColor: "red" }, }))(LinearProgress); export default function FeatureTwo() { const [hmoName, setHmoName] = useState([]); const [hmoProgress, setHmoProgress] = useState([]); const getHmo = async () => { try { //API call } catch (err) { console.log(err); } }; return ( <Table aria-label="customized table"> <TableHead> <TableRow> <StyledTableCell align="left">HMO</StyledTableCell> <StyledTableCell align="left">Enrollment Progress{''} (Percent %)</StyledTableCell> </TableRow> </TableHead> <TableBody> <TableRow> <TableCell align="left" > {hmoName.map((name, idx) => { return ( <button key={idx}> {name} </button> ); })} </TableCell> <TableCell align="left" > <div> {hmoProgress.map((number, idx) => { return ( <div> <div> <span key={idx}> {parseInt(number).toFixed(0)} </span> <span > Progress </span> </div> <span> <BorderLinearProgress variant="determinate" value={parseInt(number).toFixed(0)} /> </span> </div> ); })} </div> </TableCell> </TableRow> </TableBody> </Table> ); }

BordeLineProgress tiene un color de fondo establecido en rojo, toda la barra de progreso en cada fila tiene el BC rojo. Quiero establecer diferentes colores para cada barra de progreso para cada fila.