React Native - How to select multiple items and display them?

I would like to display selected items, but the situation I have got is not showing images but only the backgroundColor. There is image uri in productData, so I would like to display the uri. Another issue I am having is that the CheckBox is not checked.

My code below :

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 100,
  },
  topContainer: {
    flexDirection: 'row',
    marginHorizontal: 15,
    paddingBottom: 20,
    paddingTop: 10,
    borderBottomWidth: 0.5,
    borderColor: colors.very_light_pink,
  },
  iconWrap: {
    width: 60,
    height: 60,
    borderRadius: 6,
    backgroundColor: '#cccccc',
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 5,
  },
  icon: {
    width: 20,
    height: 20,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginHorizontal: 15,
    marginBottom: 15,
  },
});

const productData = [
  {
    id: 0,
    productName: 'a',
    price: 45000,
    image:
      'https://static.zara.net/photos///2021/V/0/2/p/8211/407/250/73/w/563/8211407250_2_1_1.jpg?ts=1613387641299',
  },
  {
    id: 1,
    productName: 'b',
    price: 45000,
    image:
      'https://static.zara.net/photos///2021/V/0/2/p/0526/407/707/2/w/1280/0526407707_6_1_1.jpg?ts=1610451943259',
  },
  {
    id: 2,
    productName: 'c',
    price: 129000,
    image:
      'https://static.zara.net/photos///2021/V/0/2/p/0706/442/710/2/w/563/0706442710_2_1_1.jpg?ts=1614254205907',
  },
  {
    id: 3,
    productName: 'd',
    price: 139000,
    image:
      'https://static.zara.net/photos///2021/V/0/2/p/0706/431/446/2/w/563/0706431446_2_1_1.jpg?ts=1613386951068',
  },
  {
    id: 4,
    productName: 'e',
    price: 189000,
    image:
      'https://static.zara.net/photos///2021/V/0/2/p/4162/536/401/2/w/1280/4162536401_1_1_1.jpg?ts=1613122054256',
  },
  {
    id: 5,
    productName: 'f',
    price: 89000,
    image:
      'https://static.zara.net/photos///2021/V/0/2/p/4165/537/430/2/w/563/4165537430_1_1_1.jpg?ts=1613122064808',
  },
];

const LiveAddProducts = (props) => {
  const [productClicked, setProductClicked] = useState(null);
  const [selectedProducts, setSelectedProducts] = useState([]);

  useEffect(() => {
    if (productClicked !== null) {
      setSelectedProducts((prevState) => [
        ...prevState,
        // I believe this should be changed
        { id: prevState.length, image: productClicked },
      ]);

      setProductClicked(null);
    }
  }, [productClicked]);

  console.log(selectedProducts.image);

  return (
    <View style={[styles.container]}>
      <View style={[styles.topContainer]}>
        <TouchableOpacity style={[styles.iconWrap]}>
          <Image source={assets.live_add_icon} style={[styles.icon]} />
        </TouchableOpacity>

        {selectedProducts.map((item, index) => (
          <TouchableOpacity style={[styles.iconWrap]} key={item.id}>
            <Image source= style={[styles.icon]} />
          </TouchableOpacity>
        ))}
      </View>

      <ScrollView style=>
        {productData.map((item, index) => (
          <View style={[styles.row]}>
            <ProductsList
              price={item.price}
              image={item.image}
              productName={item.productName}
            />
            // Any problems here?
            <CheckBox
              size={20}
              onPress={() => setProductClicked(index)}
              source={
                productClicked === index
                  ? assets.icon_check_on
                  : assets.checked_off
              }
            />
          </View>
        ))}
      </ScrollView>
      <BottomButton
        btnText={'Add Items'}
        buttonStyle=
      />
    </View>
  );
};

LiveAddProducts.propTypes = {};

export default LiveAddProducts;

The image which has problems :