getRowProps apply style

[garrydoherty84]

When clicking on a row I want to set the background color. Been working on it for a few days now and just can't figure out how to do it. Any thoughts would be appreciated?

<Table
                            columns={columns}
                            data={data}
                            showColumnsConfig={showColumnsConfig}
                            totalVariablesAndParams={totalVariablesAndParams}
                            getRowProps={row => ({
                              onClick: () => getRowValue(row),
                              style: {
                                cursor: "pointer"
                              }
                            })}
                        />


const getRowValue = (row) => {
        row.getRowProps({
            style: {backgroundColor : 'green'}
        })

        //return row
    };

<Styles>
            <div {...getTableProps()} className="table sticky" style={{ height: 400 }}>
                <div className="header">
                    {headerGroups.map(headerGroup => (
                        <>
                        <div {...headerGroup.getHeaderGroupProps()} className="tr">
                            {headerGroup.headers.map(column => (
                                <div {...column.getHeaderProps(column.getSortByToggleProps())} className="th">
                                    <span>
                                    {column.isSorted
                                    ? column.isSortedDesc
                                    ? '🔽'
                                    : '🔼'
                                    : ' '}
                                    </span>
                                    {column.render("Header")}
                                    <div
                                        {...column.getResizerProps()}
                                            className={`resizer ${
                                            column.isResizing ? 'isResizing' : ''
                                        }`}
                                    />
                                </div>
                            ))}
                        </div>
                        <div {...headerGroup.getHeaderGroupProps()} className="tr">
                            {headerGroup.headers.map(column => (
                                <div {...column.getHeaderProps()} className="th">
                                    {column.canFilter ? column.render('Filter') : null}
                                </div>
                            ))}
                        </div>
                        </>
                    ))}
                </div>

                <div {...getTableBodyProps()} className="body">
                    {page.map((row, i) => {
                        prepareRow(row);
                        return (
                        <div {...row.getRowProps(getRowProps(row))} className="tr" >
                            {row.cells.map(cell => {
                                return (
                                <div {...cell.getCellProps()} className="td">
                                    {cell.render("Cell")}
                                </div>
                                );
                            })}
                        </div>
                        );
                    })}
                </div>
            </div>
        </Styles>