React Typescript crazy

Can someone please explain why this isn’t working?

I have a simple react component.

interface iRowData{
   name: string
}

export default function ResultsSection(data: iRowData[]) {
   return <div>Results</div>
}

I get an error when I use this in another component.

export default function NewPage(){
   const rowData:iRowData[] = []
   return <ResultsSection data={rowData} />
}

The word data is highlighted red, and this is the error I keep getting.

Type '{ data: iRowData[]; }' is not assignable to type 'IntrinsicAttributes & iRowData[]'.
  Property 'data' does not exist on type 'IntrinsicAttributes & iRowData[]'.ts(2322)
(property) data: iRowData[]

>Solution :

I think you need to unpack the incoming parameters, e.g.

interface iResults {
   name: string;
}

interface ResultSectionProps {
   data: iResults[];
}

export default function ResultsSection({ data }: ResultSectionProps) {
   return <div>Results</div>
}