Passing and Receiving data from Functional Components React-Native

I have 2 functions, one function has the data, another function will accept the data.

so I want to pass the entire transaction data from TransactionHistoryListItem into TransactionHistoryScreen function. I am having issues on how to pass and accept the data. Currently, my error is this.

The expected type comes from property 'transaction' which is declaredhere on type 'IntrinsicAttributes & { transaction: { id: number; title: string; data: { id: number; name:string; accountNumber: number; amount: string; type: string; }[]; };}'

• TransactionHistoryListItem (which has the transaction data)

export default function TransactionHistoryListItem() {    const [transaction, setTransaction] = useState ([        {            id: 0,            title: 'Mon, 01 Aug',            data: [                {id: 1, name: 'Ores', accountNumber: 123456789, amount:'- MYR 20.00', type: 'out'},                {id: 2, name: 'RM 12', accountNumber: 987654321, amount:'+ MYR 12.00', type: 'in'},                {id: 3, name: 'GO Noodles', accountNumber: 123456789, amount:'- MYR 10.00', type: 'out'},                {id: 4, name: 'Notes', accountNumber: 123456789, amount:'- MYR 10.00', type: 'out'},            ]        },                {            id: 1,            title: 'Thu, 21 Jul',            data: [                {id: 5, name: 'Pulau ketam ytf', accountNumber: 123456789, amount:'- MYR 13.05', type: 'out'},                {id: 6, name: 'Notes', accountNumber: 123456789, amount:'+ MYR 20.00', type: 'in'},                {id: 7, name: 'Sephora', accountNumber: 918273645, amount:'- MYR 120.00', type: 'out'},                {id: 8, name: 'Dad', accountNumber: 123456789, amount:'+ MYR 200.00', type: 'in'},            ]        },               {            id: 2,            title: 'Sat,17 Jul',            data: [                {id: 9, name: 'Bill', accountNumber: 123456789, amount:'- MYR 20.00', type: 'out'},                {id: 10, name: 'Claim', accountNumber: 123456789, amount:'+ MYR 50.00', type: 'in'},            ]        },                {            id: 3,            title: 'Tue,15 Jul',            data: [                {id: 11, name: 'Food', accountNumber: 123456789, amount:'- MYR 20.00', type: 'out'},                {id: 12, name: 'Shoes', accountNumber: 123456789, amount:'- MYR 50.00', type: 'out'},                {id: 13, name: 'Ink', accountNumber: 123456789, amount:'- MYR 50.00', type: 'out'},                {id: 14, name: 'Claim', accountNumber: 123456789, amount:'+ MYR 500.00', type: 'in'},            ]        },        {            id:4,            title: 'Thu, 13 Jul',            data: [                {id: 15, name:'Zalora', accountNumber: 214365879, amount:'-230.00', type: 'out'},                {id: 16, name:'Nasi goreng', accountNumber: 324215678, amount:'-8.00', type:'out'},            ]        }    ]);    return <TransactionHistoryScreen transaction = {transaction} />}

• TransactionHistoryScreen (will accept the transaction data)

export default function TransactionHistoryScreen({transaction}    :{transaction: { id: number; title: string; data: { id: number; name: string; accountNumber: number; amount: string; type: string}[];}} ) {    return(<View><Suspense fallback = {<View><Text style = {styles.lazy}>Loading...</Text>  <ActivityIndicator animating size = "small" color = '#CED0CE' hidesWhenStopped ={true}/></View>}><TransactionHistoryList/></Suspense></View>    )}