How to pass array of objects to another screen and display them react native

How do i pass the data of selected checkboxes to the previous screen in react native.

The following is what i have done so far:

This is my SelectProducts screen

import React, {useState, useEffect} from 'react'
import { StyleSheet, Text, View, Alert, Image, ScrollView, TouchableOpacity } from 'react-native';
import Checkbox from 'expo-checkbox';


const SelectProducts = ({route}) => {

    const [checkedBox, setCheckedBox] = useState([]);
    const [selectedBoxesItem, setSelectedBoxesItem] = useState([]);
    const [itemList, setItemList] = useState([]);

    
    const includeSelectedItem = (item, index) => {
        const newCheckedBox = [...checkedBox];
        newCheckedBox[index] = !newCheckedBox[index];
        setCheckedBox(newCheckedBox);
        setSelectedBoxesItem({
            selectedUniqueKey: item.id,
            selectedItemName: item.ad_headline,
            selectedItemPrice: item.ad_price,
            selectedItemPic: item.ad_picture
        });
    }

This is the function that I'm using to send the data to the RecordASale screen after clicking on the Done button that is below the list of checkboxes.

    const handleSelectedSubmit = () => {
        navigation.navigate({
            name: 'RecordASale',
            params: {
                post: [selectedBoxesItem],
            },
            merge: true,
        })
    }

And this is the checkbox:

    return (
         {itemList.map((item, index) => (
                <DataTable.Row>
                  <DataTable.Cell>
                  <View style={styles.checkboxContainer}>
                     <Checkbox
                      key={item.id}
                      value={checkedBox[index]}
                      onValueChange={() => includeSelectedItem(item, index)}
                      color={checkedBox ? '#800080' : undefined}
                      style={styles.checkbox}
                    />
                  </View>
                  </DataTable.Cell>
                  <DataTable.Cell>
                  <Image source =  style =  />
                  </DataTable.Cell>
                  <DataTable.Cell>{item.ad_headline}</DataTable.Cell>
                  <DataTable.Cell>{item.ad_price}</DataTable.Cell>
                </DataTable.Row>
             ))}
        
            <View style = {styles.submitButton}>
               <Text style = {styles.submitButtonText} onPress={() => handleSelectedSubmit()}>Done</Text>
            </View>
          </DataTable>

    );
}

What i want to achieve is to get the following details for every checkbox selected:

1. item.id,
2. item.ad_headline,
3. item.ad_price,
4. item.ad_picture

All the above data should be passed from this SelectProducts screen to RecordASale screen

To my own understanding, what I did was that I passed objects to the function of the state below:

const [selectedBoxesItem, setSelectedBoxesItem] = useState([]);
setSelectedBoxesItem({
            selectedUniqueKey: item.id,
            selectedItemName: item.ad_headline,
            selectedItemPrice: item.ad_price,
            selectedItemPic: item.ad_picture
});

So when i did this, I only get the last selected checkbox details passed to the RecordASale screen even though i selected more than one checkbox.

This is how i'm getting the details into the RecordASale screen:

const RecordASale = ({route}) => {

   return (
           {(route.params?.post) ? route.params?.post.map((item, index) => (
        <View>
           <View key={index}>
                <Image source =  style =  />
                <Text>{item.selectedItemName}</Text>
                <Text>{item.selectedItemPrice}</Text>
           </View>
        </View>
           )) : <Text></Text>}
   );

}

I want the same details as above for all selected checboxes to be passed to the other screen, and not just one.

I believe I'm quite close to that but some things are missing in my code. Please help. Thanks.

I only shared the parts I'm having problems with.