I am using AG Grid React version 28.

I am trying to build a reusable AG Grid component so I want to pass dynamic columns and data into my reusable AG Grid component. Everything works fine if I put all my data inside the same component i.e. rowData and columnDefs live in the same component. However, when I abstract out my data, for both rowData and columnDefs, and pass it in as props into my ag grid, I get errors. How can I abstract out the data and columns and pass it in as props?

The error I get for rowData is: rowData.map is not a function react agrgrid.

For columns I get: TS2322: Type '{ columns: ({ maxWidth: number; flex: number; cellRenderer: () => Element; field?: undefined; minWidth?: undefined; } | { field: string; minWidth: number; flex: number; maxWidth?: undefined; cellRenderer?: undefined; } | { ...; })[]; data: { ...; }[]; }' is not assignable to type 'IntrinsicAttributes & []'.   Property 'columns' does not exist on type 'IntrinsicAttributes & []'.

function DataGridResults(columns: ColDef<any>[], data: any) {
  const [gridApi, setGridApi] = useState<GridApi | null>(null)
  const [gridColumnApi, setGridColumnApi] = useState<ColumnApi | null>(null)
  const [colDefs, setColDefs] = useState<ColDef<any>[] | null>(null)
  const [rowData, setRowData] = useState(null)

  const onGridReady = (params: GridReadyEvent): void => {
    setGridApi(params.api)
    setGridColumnApi(params.columnApi)
    setColDefs(columns)
    setRowData(data)
  }

  return (
    <AgGridReact
          domLayout="autoHeight"
          rowData={rowData}
          columnDefs={colDefs}
          onGridReady={onGridReady}
        />
  )
}

export default DataGridResults

const data = () => [
  {
    fileName: 'Bus.pdf',
    dateAdded: '07 Mar 24 09:31:28',
    validated: '',
  },
]

function PreExistingDocumentation() {
  return (
    <DataGridResults columns={colDefPreExistingDocuments} data={data} />
  )
}

export default PreExistingDocumentation

export const colDefPreExistingDocuments = [
  { maxWidth: 25, flex: 1, cellRenderer: DownloadRenderer },
  { field: 'fileName', minWidth: 120, flex: 1 },
  { field: 'dateAdded', minWidth: 150, flex: 1 },
  {
    field: 'validated',
    minWidth: 20,
    flex: 1,
    cellRenderer: ValidatedRenderer,
  },
]