How can I check the value being displayed for a footer element?

[rachanavishwanath]

I am trying to add CSS logic based on the value of the footer.
for e.g. green if value at footer === 25, red if > 25

The footer is a function that calculates total of values in that column using .reduce

Footer: info => {
let total = 0;
if (acc) {
total = React.useMemo(() => info.data.reduce((sum, row) => sum+"value at row", 0),
[info.rows]);
}
return <>{total.toFixed(2)}</>
};

footerComponent:

return (

{footerGroups.map((group) => (
<tr {...group.getFooterGroupProps()}>
{group.headers.map((column) => {
let val = column.render("Footer"), // this is a react element
return <td {...column.getFooterProps()}>{
column.render("Footer")
}
}
)}

))}

);

footerComponent.propTypes = {
children: PropTypes.any,
};