How to pass an array of objects in Typescript NextJS with interfaces IntrinsicAttributes error

I am using NextJS with typescript. In the main async page, I get the client Quotes
const clientQuotes: IQuote[] = await getAllQuotes();.

The IQuote interface have the following form:

export interface IQuote {
    id:                 string          
    dateTimeAdded:      string
    hasBeenPaid:        boolean
    completed:          boolean
    dateTimeNeeded:     string  
    nameClient:         string     
    numberOfVechicles:  number
    serviceRequired:    string  
    phoneNumber:        string   
    clientEmail:        string   
    detailsOfQuote:     string    
};

The response I get is a normal array of objects. [{}, {}], filled with the info above.

Next, I created another component where I passed the array with a prop quotes. However, this prop is highlighted in red. <UncompletedQuotes quotes={clientQuotes}/>

The error is Type '{ quotes: IQuote[]; }' is not assignable to type 'IntrinsicAttributes & IQuoteList'. Property 'quotes' does not exist on type 'IntrinsicAttributes & IQuoteList'.ts(2322), which I do not understand…

import React, { FC } from 'react'

export interface IQuote {
    id:                 string          
    dateTimeAdded:      string
    hasBeenPaid:        boolean
    completed:          boolean
    dateTimeNeeded:     string  
    nameClient:         string     
    numberOfVechicles:  number
    serviceRequired:    string  
    phoneNumber:        string   
    clientEmail:        string   
    detailsOfQuote:     string    
};

interface IQuoteList extends Array<IQuote>{};



const UncompletedQuotes: FC<IQuoteList> = (quotes) => {
  
  console.log(quotes);
  

  return (
    <section>
    </section>
  )
}

export default UncompletedQuotes

The problem is also that if I log in console the prop sent I get an object that contains a key called quotes. So instead to have a simple array of objects I get something of the following form:
{quotes: [{id, dateTime, etc}, {id, dateTime, etc}]}

>Solution :

Try this:

export interface IQuote {
    id:                 string          
    dateTimeAdded:      string
    hasBeenPaid:        boolean
    completed:          boolean
    dateTimeNeeded:     string  
    nameClient:         string     
    numberOfVechicles:  number
    serviceRequired:    string  
    phoneNumber:        string   
    clientEmail:        string   
    detailsOfQuote:     string    
}

// here you assign all props your function/component will have
// this will be the type of your function object param
type ComponentType = {
  quotes: IQuote[]
  // you can add as many props you want
  otherProp: number
  anotherProp: string
}

// your function/component will receive an object as ComponentType 
// and we are destructuring it in function declaration...
function UncompletedQuotes({
  quotes,
  otherProp,
  anotherProp
}: ComponentType): JSX.Element {
  
  console.log(quotes)
  
  return (
    <section>
    </section>
  )
}


// ... or you can create the function and destruct params object later
function UncompletedQuotes(params: ComponentType) {
  const {
    quotes,
    otherProp,
    .... etc
  } = params

  ....
}

export default UncompletedQuotes

Hope this helps you 😀