How to pass something backwards?

Question

I am working on an app where there is a tier list in which one can select players from. It's like Home>join>Tiers 1,2,3. What i want to do is with each player details coming from the api there is a unique player id with it also so i want that id, take it back to the join page where i can see my selected player and on join page there after selecting a player, its name and image will be shown. But in the tier list the api which is used doesn't have the image. I have to get that image with another api but by using the ID i am getting from the tier api. If it was like passing the id from join to tier component which i have already done but passing props from child to parent component is not possible i think. On join page there will be total of 6 players selected from 3 tiers. If I somehow take the data back to the join page, will i have to use 6 APIs for all 6 images? Here's my code for the join page:

//Join 
const Join = ({ navigation, route}) => {
  const [{ tierOneSelectedPlayer, tierTwoSelectedPlayer, tierThreeSelectedPlayer}, dispatch] = useStateValue()

  const id = route.params.key
  const date = route.params.date

  const getTierOneData = () => (
    <>
      <View style={{ flexDirection: 'column', marginTop: 15 }}>
      <TouchableOpacity onPress={() => navigation.navigate('Tier1', {key: id})}>
        <Image
          style={styles.Images}
          source={require('../../../assets/Placeholder.png')}
        />
        </TouchableOpacity>
        <View style={{height: 20,  alignItems: 'center', marginTop: 3 }}>
        <Text style={styles.NameText}>
          {tierOneSelectedPlayer[0]?.Name || 'Select Player'}
        </Text>
        </View>
      </View>
      <View style={{ flexDirection: 'column', marginTop: 15 }}>
      <TouchableOpacity onPress={() => navigation.navigate('Tier1', {key: id})}>
        <Image
          style={styles.secImage}
          source={require('../../../assets/Placeholder.png')}
        />
        </TouchableOpacity>
        <View style={{  height: 20, alignItems: 'center', marginTop: 3 }}>
        <Text style={styles.secName}>
          {tierOneSelectedPlayer[1]?.Name || 'Select Player'}
        </Text>
        </View>
      </View>
    </>
  )

  const getTierTwoData = () => (
    <>
    <View style={{ flexDirection: 'column' }}>
    <TouchableOpacity onPress={() => navigation.navigate('Tier2', {key: id})}>
      <Image
        style={styles.Images}
        source={require('../../../assets/Placeholder.png')}
      />
      </TouchableOpacity>
      <View style={{height: 20,  alignItems: 'center', marginTop: 3 }}>
      <Text style={styles.NameText}>
        {tierTwoSelectedPlayer[0]?.Name || 'Select Player'}
      </Text>
      </View>
    </View>
    <View style={{ flexDirection: 'column' }}>
    <TouchableOpacity onPress={() => navigation.navigate('Tier2', {key: id})}>
      <Image
        style={styles.secImage}
        source={require('../../../assets/Placeholder.png')}
      />
      </TouchableOpacity>
      <View style={{  height: 20, alignItems: 'center', marginTop: 3 }}>
      <Text style={styles.secName}>
        {tierTwoSelectedPlayer[1]?.Name || 'Select Player'}
      </Text>
      </View>
    </View>
  </>
  )

  const getTierThreeData = () => (
    <>
      <View style={{ flexDirection: 'column' }}>
      <TouchableOpacity onPress={() => navigation.navigate('Tier3', {key: id})}>
        <Image
          style={styles.Images}
          source={require('../../../assets/Placeholder.png')}
        />
        </TouchableOpacity>
        <View style={{height: 20,  alignItems: 'center', marginTop: 3 }}>
        <Text style={styles.NameText}>
          {tierThreeSelectedPlayer[0]?.Name || 'Select Player'}
        </Text>
        </View>
      </View>
      <View style={{ flexDirection: 'column' }}>
      <TouchableOpacity onPress={() => navigation.navigate('Tier3', {key: id})}>
        <Image
          style={styles.secImage}
          source={require('../../../assets/Placeholder.png')}
        />
        </TouchableOpacity>
        <View style={{  height: 20, alignItems: 'center', marginTop: 3 }}>
        <Text style={styles.secName}>
          {tierThreeSelectedPlayer[1]?.Name || 'Select Player'}
        </Text>
        </View>
      </View>
    </>
  )

  const Checkup = ({navigation}) => {
    if(tierOneSelectedPlayer.length !== 2){
      Alert.alert('Dugkings','Please select 2 players in each tier')
      return false;
    }
    else if (tierTwoSelectedPlayer.length !== 2){
      Alert.alert('Dugkings','Please select 2 players in each tier')
    }
    else if (tierThreeSelectedPlayer.length !== 2){
      Alert.alert('Dugkings','Please select 2 players in each tier')
    }
    else {
        dispatch({
          type: 'TAB_TYPE',
          payload: TAB_TYPES.LIVE
        })
        navigation.navigate('Contest')
      }
    }
  

  return (
    <ScrollView style={{flex: 1, backgroundColor: 'white'}}>
      <View style={styles.container}>
        <View style={styles.LivestandingsView}>
          <TouchableOpacity onPress={() => navigation.navigate('Home')}>
            <Image
              style={styles.Image}
              source={require('../../../assets/LeftArrow2.png')}
            />
          </TouchableOpacity>
          <View style={{ left: 5, top: 8 }}>
            <Text
              style={{
                color: 'black',
                fontSize: 15,
                letterSpacing: 0.8,
                fontWeight: '400',
                marginTop: 3
              }}>
              Join Contest
            </Text>
          </View>
        </View>
        <Image
          style={{ height: 2, marginTop: Platform.OS === 'ios' ? 95 : 60, width: WIDTH }}
          source={require('../../../assets/Line3.png')}
        />
        <Text style={{ fontWeight: '500', fontSize: 20, color: 'black', marginTop: 10 }}>
          Create Entry
        </Text>
        <View style={{ flexDirection: 'row' }}>
          <Image
            style={{ width: 153, height: 120, marginTop: 20, }}
            source={require('../../../assets/golf.png')}
          />
          <View style={{ flexDirection: 'column' }}>
            <Text
              style={{
                marginTop: 40,
                marginLeft: 10,
                color: 'black',
                fontSize: 13,
                fontWeight: '500',
              }}>
              Contest Entry Fee: $49
            </Text>
            <Text
              style={{
                marginTop: 25,
                color: 'black',
                fontSize: 13,
                fontWeight: '500',
                marginLeft: 10,
              }}>
              Contest Locks at: {moment(date).format('DD-MM-YYYY')}
            </Text>
          </View>
        </View>
        <View
          style={{ flexDirection: 'row', marginTop: 40, marginHorizontal: 20 }}>
          <Text
            style={{
              color: '#1E8449',
              marginTop: 45,
              fontWeight: '600',
              fontSize: 15,
            }}>
            Tier 1
          </Text>
          {getTierOneData()}
          <View style={{borderBottomWidth: 1, height: Platform.OS === 'ios' ? 57: 60, left: 5}}>
          <TouchableOpacity onPress={() => navigation.navigate('Tier1', {key: id})}>
            <Text
              style={{
                marginTop: 42,
                color: 'black',
                fontSize: 13,

              }}>
              See more
            </Text>
          </TouchableOpacity>
          </View>
        </View>
        <View
          style={{ flexDirection: 'row', marginTop: 40, marginHorizontal: 20 }}>
          <Text
            style={{
              color: '#1E8449',
              marginTop: 32,
              fontWeight: '600',
              fontSize: 15,
            }}>
            Tier 2
          </Text>
          {getTierTwoData()}
          <View style={{borderBottomWidth: 1, height: Platform.OS=== 'ios' ? 40 : 42, left: 5}}>
          <TouchableOpacity onPress={() => navigation.navigate('Tier2', {key: id})}>
            <Text
              style={{
                marginTop: 25,
                color: 'black',
                fontSize: 13,

              }}>
              See more
            </Text>
          </TouchableOpacity>
          </View>
        </View>
        <View
          style={{ flexDirection: 'row', marginTop: 40, marginHorizontal: 20 }}>
          <Text
            style={{
              color: '#1E8449',
              marginTop: 30,
              fontWeight: '600',
              fontSize: 15,
            }}>
            Tier 3
          </Text>
          {getTierThreeData()}
          <View style={{borderBottomWidth: 1, height: Platform.OS=== 'ios' ? 40 : 42, left: 5}}>
          <TouchableOpacity onPress={() => navigation.navigate('Tier3', {key: id})}>
            <Text
              style={{
                marginTop: 25,
                color: 'black',
                fontSize: 13,

              }}>
              See more
            </Text>
          </TouchableOpacity>
          </View>
        </View>
        <View style={{ flexDirection: 'row' }}>
          <TouchableOpacity
            style={{
              backgroundColor: '#1E8449',
              width: 140,
              height: 40,
              borderRadius: 10,
              alignItems: 'center',
              justifyContent: 'center',
              marginTop: 50,
              marginRight: 10,
            }}
            onPress={Checkup}
            >
            <Text
              style={{
                ...Platform.select({
                  android: {
                    fontFamily: 'Poppins-SemiBold'
                  },
                  ios: {
                    fontWeight: 'bold'
                  }
                }),
                color: 'white',
                fontSize: 12,
              }}>
              Submit Entry
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              backgroundColor: '#1E8449',
              width: 140,
              height: 40,
              borderRadius: 10,
              alignItems: 'center',
              justifyContent: 'center',
              marginTop: 50,
              marginLeft: 10,
            }}
            >
            <Text
              style={{
                ...Platform.select({
                  android: {
                    fontFamily: 'Poppins-SemiBold'
                  },
                  ios: {
                    fontWeight: 'bold'
                  }
                }),
                color: 'white',
                fontSize: 12,
              }}>
              Save for later
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView >
  );
};

export default Join;

Here's my code for the Tier page

// Tier 
const Tier1 = ({ navigation, route }) => {
  const [{ }, dispatch] = useStateValue()
  const [selected, setSelected] = useState([])
  const [data, setData] = useState([])


  const id = route.params.key

  useEffect(() => {
    Players();
  }, []);
// can't show the api part

 const onSelect = data => {
    selected?.length < 2
      ? setSelected([...selected, data])
      : Toast.show({
        type: 'error',
        text2: 'You have selected maximum players of this tier',
      });
  }

  const onRemove = data => {
    let remainingPlayers = []
    selected.map(item => {
      item.PlayerID == data.PlayerID
        ? null
        : remainingPlayers.push(item)
    })
    setSelected(remainingPlayers)
  }

  const submitPlayer = () => {
    if (selected.length !== 2) {
      Toast.show({
        type: 'error',
        text2: 'Please select 2 players',
      })
    }
    else {
      dispatch({
        type: 'TIER_ONE',
        payload: selected
      })

      navigation.replace('Join', { key: id })
    }
  }


  const renderItem = ({ item }) => (

    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}>
      <View style={{
        flexDirection: 'row',
        marginVertical: 10,
        width: wp(100),
        backgroundColor: 'white',
        height: 50,
        justifyContent: 'center',
        alignItems: 'center',
        elevation: 5,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.5,
        shadowRadius: 1
      }}>
        <View style={{ flex: 1.4, justifyContent: 'center', alignItems: 'center' }}>
          <Text numberOfLines={1} style={{
            fontSize: 13,
            color: 'black',
          }}>
            {item.Name}
          </Text>
        </View>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          {item.Rank == null && <Text style={{
            fontSize: 13,
            color: 'black',
          }}>
            N/A
          </Text>}
          {item.Rank && <Text style={{
            fontSize: 13,
            color: 'black',
          }}>
            {item.Rank}
          </Text>}
        </View>
        <View style={{ flex: 0.6, justifyContent: 'center', alignItems: 'center' }}>
        {item.TotalStrokes == null && <Text style={{
            fontSize: 13,
            color: 'black',
          }}>
            N/A
          </Text>}
          {item.TotalStrokes && <Text style={{
            fontSize: 13,
            color: 'black',
          }}>
            {item.TotalStrokes}
          </Text>}
        </View>
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', height: 35 }}>
          {selected.some(player => player.PlayerID == item.PlayerID)
            ? <TouchableOpacity onPress={() => onRemove(item)}>
              <Image style={{ width: 25, height: 25, marginLeft: 20 }} source={require('../../../../../assets/Minus.png')} />
            </TouchableOpacity>
            : <TouchableOpacity onPress={() => onSelect(item)}>
              <Image style={{ width: 25, height: 25, marginLeft: 20 }} source={require('../../../../../assets/Plus.png')} />
            </TouchableOpacity>
          }
        </View>
      </View>
    </View>
  );

  return (
    <ScrollView style={{ flex: 1, backgroundColor: 'white' }}>
      <View style={styles.container}>
        <View style={styles.LivestandingsView}>
          <TouchableOpacity onPress={() => {
            if (selected.length > 0) {
              Alert.alert("Are you sure you want to go back?", "All your selections will be unsaved", [
                {
                  text: "Cancel",
                  onPress: () => null,
                  style: "cancel"
                },
                {
                  text: "YES", onPress: () => {
                    navigation.goBack("Join");
                  }
                }
              ]);
              return true;
            }

            else {
              navigation.goBack()

            }
          }}>

            <Image
              style={styles.Image}
              source={require('../../../../../assets/LeftArrow2.png')}
            />
          </TouchableOpacity>
          <View style={{ left: 5, top: 8 }}>
            <Text
              style={{
                color: 'black',
                fontSize: 15,
                letterSpacing: 0.8,
                fontWeight: '400',
                marginTop: 3
              }}>
              Select Tier 1 Golfers
            </Text>
          </View>
        </View>
        <Image
          style={{ height: 2, marginTop: Platform.OS === 'ios' ? 95 : 60, width: WIDTH }}
          source={require('../../../../../assets/Line3.png')}
        />
        <View style={{ flexDirection: 'row' }}>
          <Text style={styles.HeadlineText}>Golfer's Name</Text>
          <Text style={styles.HeadlineText}>World Rank</Text>
          <Text style={styles.HeadlineText}>Prev finish</Text>
          <Text style={styles.HeadlineText}>Action</Text>
        </View>
        <View style={{ backgroundColor: '#e4f0e9', height: hp(70), width: wp(100) }}>
          <FlatList
            nestedScrollEnabled={true}
            data={data}
            renderItem={renderItem}
            keyExtractor={item => item.PlayerID}
          />
        </View>
        <TouchableOpacity
          style={{
            backgroundColor: '#1E8449',
            width: 150,
            height: 45,
            borderRadius: 10,
            alignItems: 'center',
            justifyContent: 'center',
            marginTop: 40,
            marginLeft: 10,
          }}

          onPress={() => submitPlayer()}>
          <Text
            style={{
              ...Platform.select({
                android: {
                  fontFamily: 'Poppins-SemiBold'
                },
                ios: {
                  fontWeight: 'bold'
                }
              }),
              color: 'white',
              fontSize: 14,
            }}>
            Save selection
          </Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
};

export default Tier1;