TableRow: Unexpected any. Specify a different type

Question

Building a Table component using TS followed this to type everything as needed.

But as I broke down the row in it's separate component i am unable to type it properly.

export interface ITableRow<DataType> {
  rowData: any; // The Issue is with this line
  columnKeys: Array<DataType>;
}

function getTableRow<T>({ rowData, columnKeys }: ITableRow<T>) {
  return columnKeys.map((columnKey, index) => (
    <td key={index}>{rowData[columnKey]}</td>
  ));
}

export function TableRow<T>({ rowData, columnKeys }: ITableRow<T>) {
  const tableRow = getTableRow({ rowData, columnKeys });
  return <tr>{tableRow}</tr>;
}

The rowData prop is an object that can have any number of keys as specified in the headers object

for example:

const heads = [
  {
    id: 'company',
    label: 'Company'
  },
  {
    id: 'nb_employees',
    label: 'Number of employees'
  },
  {
    id: 'country',
    label: 'Country'
  }
];

const rows = [
  {
    company: 'Vody aho',
    nb_employees: 1590,
    country: 'Hong Kong'
  },
  {
    company: 'Royal spirit',
    nb_employees: 15,
    country: 'USA'
  },
];

How do I type the rowData dynamically in this case?

I tried any and it worked but then it's useless to use TS at all,

I tried extends as well but i don't think i understand it well so that failed as well