Как я могу установить индивидуальное значение опоры для компонента, который вызывается 5 раз?

Question

Я звоню компоненту 5 раз.Например, он вызывается 4 раза в своем первом родительском компоненте, но затем мне нужно вызвать этот родительский компонент в другом компоненте дедушки, который содержит значение, которое мне понадобится.

Это дочерний компонент:

// imports

const PassengerAvatar = ({ numberOfPassengers, cardinalPoint }) => (
  <Svg.G>
    <Svg.Text>
      <Svg.TSpan>
        {numberOfPassengers}
      </Svg.TSpan>

      <Svg.TSpan>
        {cardinalPoint}
      </Svg.TSpan>
    </Svg.Text>
  </Svg.G>
);

export default PassengerAvatar;

Его родитель, где он получает вызов 4 раза:

// imports

const PassengersCircle = ({ numberOfPassengers }) => (

      <View>
        <PassengerAvatar
          numberOfPassengers={numberOfPassengers}
          cardinalPoint="NORTH"
        />

        <PassengerAvatar
          numberOfPassengers={numberOfPassengers}
          cardinalPoint="SOUTH"
        />

        <PassengerAvatar
          numberOfPassengers={numberOfPassengers}
          cardinalPoint="EAST"
        />

        <PassengerAvatar
          numberOfPassengers={numberOfPassengers}
          cardinalPoint="WEST"
        />
      </View>

)

// export

Компонент дедушки: На компоненте дедушки я выбираю данные API:

// imports

import { has, countBy, property } from 'lodash';

import tabViewStyles from './styles/TabViewStyles';
import PassengersCircle from './PassengersCircle';
import AllPassengersList from './AllPassengersList';
import { unassignedDropOffPassengersAction } from './actions/homeScreen';

let passengersGoingNorth;
let passengersGoingSouth;
let passengersGoingWest;
let passengersGoingEast;

class AllPassengersDropOff extends Component {
  componentDidMount() {
    this.fetchDropOffPassengers();
    this.callFilter();
  }

  fetchDropOffPassengers = async () => {
    const { unassignedDropOffPassengersActionHandler, userToken } = this.props;
    if (userToken) {
      // here I perform the fetch
     // and save the the data here: unassignedDropOffPassengers
    }
  };

  callFilter = () => {
    // here I could set a filter to get every cardinal point separately 
    const { unassignedDropOffPassengers } = this.props;
    ({
      N: passengersGoingNorth,
      S: passengersGoingSouth,
      W: passengersGoingWest,
      E: passengersGoingEast,
    } = countBy(unassignedDropOffPassengers, property('cardinalpoint')));
  };

  render() {
    return (
      <ScrollView>
          <PassengersCircle
            numberOfPassengers={//numberOfPassengers based on cardinal point}
          />
      </ScrollView>
    );
  }
}

// export 

КакВидите ли, в компоненте отца есть опора cardinalPoint.Вот как выглядит массив:

[{
  "id": 8,
  "phone": "45379911",
  "pickup": 1,
  "cardinalpoint": "S",
},
{
  "id": 10,
  "phone": "234482933",
  "pickup": 1,
  "cardinalpoint": "N",
}]

На numberOfPassengers, мне нужно сделать что-то вроде: Если есть 10 пассажиров, идущих на север, то установите это число на количество пассажировсоответствующего вызова компонента.Как здесь:

        <PassengerAvatar
          numberOfPassengers={numberOfPassengers}
          cardinalPoint="NORTH"
        />

Так что это основная идея.Как вы видели выше, в компоненте дедушки я называю компонент отца следующим образом:

          <PassengersCircle
            numberOfPassengers={//numberOfPassengers based on cardinal point}
          />

Итак, на опоре numberOfPassengers я мог бы сделать что-то вроде numberOfPassengers={ifPassengerNorth ? northPassengers : ... }

Так чтоя могу сделать, чтобы выполнить то, что мне нужно, чего мне не хватает?