React Table - types of property 'accessor' are incompatible

I am trying out react-table in create-react-app project (version ^7.0.25). I am using the exact example from their quick start documentation. However, I am getting a type error between the accessor and data columns. below is my code,

import * as React from 'react';
import { Solution } from '../../../Models/SolutionModel';
import {useTable} from 'react-table'

interface ICompareTableComponentProps {
  Solutions : Solution[]
}

const CompareTableComponent: React.FunctionComponent<ICompareTableComponentProps> = (props) => {
    
    const data = React.useMemo(
      () => [
        {
          col1: 'Hello',
          col2: 'World',
        },
        {
          col1: 'react-table',
          col2: 'rocks',
        },
        {
          col1: 'whatever',
          col2: 'you want',
        },
      ],
      []
    )
  
    const columns = React.useMemo(
      () => [
        {
          Header: 'Column 1',
          accessor: 'col1', // accessor is the "key" in the data
        },
        {
          Header: 'Column 2',
          accessor: 'col2',
        },
      ],
      []
    )
  
    const {
      getTableProps,
      getTableBodyProps,
      headerGroups,
      rows,
      prepareRow,
    } = useTable({ columns, data })
  
    return (
      <table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th
                  {...column.getHeaderProps()}
                  style={{
                    borderBottom: 'solid 3px red',
                    background: 'aliceblue',
                    color: 'black',
                    fontWeight: 'bold',
                  }}
                >
                  {column.render('Header')}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map(row => {
            prepareRow(row)
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => {
                  return (
                    <td
                      {...cell.getCellProps()}
                      style={{
                        padding: '10px',
                        border: 'solid 1px gray',
                        background: 'papayawhip',
                      }}
                    >
                      {cell.render('Cell')}
                    </td>
                  )
                })}
              </tr>
            )
          })}
        </tbody>
      </table>
    )
          
};
export default CompareTableComponent;

Below is my the full error,

Type '{ Header: string; accessor: string; }[]' is not assignable to type 'Column<{ col1: string; col2: string; }>[]'.
  Type '{ Header: string; accessor: string; }' is not assignable to type 'Column<{ col1: string; col2: string; }>'.
    Type '{ Header: string; accessor: string; }' is not assignable to type 'ColumnInterface<{ col1: string; col2: string; }> & { accessor: "col2"; } & ColumnInterfaceBasedOnValue<{ col1: string; col2: string; }, string>'.
      Type '{ Header: string; accessor: string; }' is not assignable to type '{ accessor: "col2"; }'.
        Types of property 'accessor' are incompatible.
          Type 'string' is not assignable to type '"col2"'.  TS2322

I have tried with converting the columns into objects but no luck.

{
    col1: 'react-table' as any,
    col2: 'rocks' as any,
}

I am sure I am overlooking something very trivial but cannot seem to find the issue. Any help on this will be hugely appreciated.