Запрос в отображенном ребенке с параметрами, переданными от родителя надлежащим образом

Question

У меня есть массив данных, и я хочу создать массив компонентов. Каждый из компонентов также получит некоторые данные, которые относятся только к текущему компоненту во время итерации l oop.

Это родительский компонент. Эта часть работает хорошо и создает список UserListedItems с уникальным projectId.

render() {
  var usersListedItems;
  if (this.props.data.length > 0) {
    usersListedItems = this.props.data.map(element => {
      return (
        <Grid item xs={6} sm={3} key={element.id}>
          <UsersListedItems
            projectId={element.id}
            ownerId={element.ownerId}
            ownerName={element.ownerName}
          />
        </Grid>
      );
    });
  }
  return (
    <div style={{ padding: 20 }}>
      <Grid container spacing={3}>
        {usersListedItems}
      </Grid>
    </div>
  );
}

Проблема, с которой я сталкиваюсь, связана с дочерним компонентом -> usersListedItems. По сути, каждый ребенок получит список изображений URL через projectId. На самом деле происходит то, что последняя итерация l oop будет отображать URL всех других компонентов.

componentDidMount() {
  this.props.projectMedia(this.props.projectId);
}
render() {
  return (
    <div>
      <Card
        style={{ ...styles.card, borderColor: _borderColor }}
        raised={this.state.isHovered}
      >
        <CardHeader
          avatar={
            <Avatar
              id={"av" + this.props.projectId}
              className={this.state.colorAvatar}
              style={{ marginBottom: "5px" }}
            >
              {this.props.ownerName.charAt(0).toLocaleUpperCase()}
            </Avatar>
          }
          subheader={
            <Typography variant="body1" style={{ color: _borderColor }}>
              {this.props.userName}
            </Typography>
          }
        />
        <CardActionArea>
          <CardPrimaryContent>
            <CardMedia
              square
              imageUrl={
                this.props.data.length > 0 ? this.props.data[0].url : null
              }
            />
          </CardPrimaryContent>
        </CardActionArea>
      </Card>
    </div>
  );
}

Таким образом, в основном я вижу уникальный projectId в дочернем элементе, но не URL проекта

Любой совет, как предотвратить это из-за рендеринга?

Прошу прощения, если мне не ясно.

Спасибо