[v7] Is it possible to use cell.className in a dynamic manner with cell data ?

[Pasi-D]

I'm using react-table v7 & noticed that we can use className prop to use custom className for the entire cell.

What I need is to dynamically change this className based on the cell value.

I tried following method but didn't succeeded.

const columns = [
  {
        Header: 'status',
        accessor: 'status',
        sort: false,
        Cell: ({ cell, value }: { value: 'COMPLETED' || 'IN_PROGRESS' || 'NOT_STARTED' || 'REJECTED', cell: any }) => {
            const className = `cell-bg-${value === 'COMPLETED' ? 'green' 
            : value === 'IN_PROGRESS' ? 'blue' : value === 'NOT_STARTED' ? 'yellow' : 'red'}`;
            cell.className = className;
            cell.column.className = className;
            cell.column.cellClasses = className;
            return (
                <div>
                    {value}
                </div>
            )
        }
    }
]

Upon reading several other discussions including this one I noticed that you can't manipulate cell.className directly.

So is there a way to dynamically render cell classNames based on the data parsed ?