title: React table changing style of cell onClick
body: <p>I'm new to react table, I've created the basic table using react-table. I'm not able to figure out how to change the color of a cell when click on that particular cell. I don't find any resource or related question on Stackoverflow.</p>
  <p>Here is my Code looks like:</p>
  <pre><code>import React, { useMemo } from 'react'
  import { useTable } from 'react-table'
  import MOCK_DATA from '../MOCK_DATA.json'
  import { COLUMN } from './Column'
  import './table.css'
  
  export const BasicTable = () =&gt; {
    const columns = useMemo(() =&gt; COLUMN, [])
    const data = useMemo(() =&gt; MOCK_DATA, [])
  
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      footerGroups,
      rows,
      prepareRow
    } = useTable({
      columns,
      data
    })
  
    return (
      &lt;&gt;
        &lt;table {...getTableProps()}&gt;
          &lt;thead&gt;
            {headerGroups.map(headerGroup =&gt; (
              &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
                {headerGroup.headers.map(column =&gt; (
                  &lt;th {...column.getHeaderProps()}&gt;{column.render('Header')}&lt;/th&gt;
                ))}
              &lt;/tr&gt;
            ))}
          &lt;/thead&gt;
          &lt;tbody {...getTableBodyProps()}&gt;
            {rows.map(row =&gt; {
              prepareRow(row)
              return (
                &lt;tr {...row.getRowProps()}&gt;
                  {row.cells.map(cell =&gt; {
                    return &lt;td {...cell.getCellProps()}&gt;{cell.render('Cell')}&lt;/td&gt;
                  })}
                &lt;/tr&gt;
              )
            })}
          &lt;/tbody&gt;
          &lt;tfoot&gt;
            {footerGroups.map(footerGroup =&gt; (
              &lt;tr {...footerGroup.getFooterGroupProps()}&gt;
                {footerGroup.headers.map(column =&gt; (
                  &lt;td {...column.getFooterProps()}&gt;{column.render('Footer')}&lt;/td&gt;
                ))}
              &lt;/tr&gt;
            ))}
          &lt;/tfoot&gt;
        &lt;/table&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>I'm getting demo data in MOCK_DATA(it's just random data). When I click on particular cell I want that particular cell color change. How I should approach this. In react if we want to change color of button or anything else we can use useState to do that but I'm not able to figure out here.</p>
  <p>Here is the live example: <a href="https://codesandbox.io/s/focused-field-2sgkqz?file=/src/MOCK_DATA.json:35842-48670" rel="nofollow noreferrer">https://codesandbox.io/s/focused-field-2sgkqz?file=/src/MOCK_DATA.json:35842-48670</a></p>