Реакция импорта нескольких изображений на основе состояния

Question

Я пытаюсь динамически «создавать» дочерние компоненты, основываясь на объектах продуктов, которые я получаю в качестве реквизита. Каждый из компонентов должен представлять один продукт. Для этого я также хочу динамически импортировать фоновые изображения, которые я передаю в качестве реквизита для созданных дочерних компонентов. Я пробовал несколько разных подходов, но всегда возникает проблема с асинхронным характером этой темы.

import React, { Component } from 'react';
import styles from './OrderCard.module.css';
import Order from './OderRow/Order/Order';

class OrderCard extends Component {

  state = {
    backgrounds: []
  };
  
  async componentDidMount() {
    await Object.keys(this.props.productList).map((product, i) => {
        return import(`../../assets/color/${product}.PNG`).then(picture => {
          let currentBackgrounds = [...this.state.backgrounds];
          currentBackgrounds[i] = picture;
          this.setState({
            backgrounds: currentBackgrounds
          });
        });
      }); 
  }
  
  render() {
    const productList = this.state.backgrounds.map((link, i) => {
        return <Order key={i} bgImage={link} />;
      });

    return (
      <div className={styles.OrderCard}>
        <div className={styles.Orders}>{productList}</div>
      </div>
    );
  }
}

export default OrderCard;

Когда я сохраняю дочерние компоненты console.log, он выдает что-то вроде этого: "Module {default:" /static/media/hamburger.32bafa34.PNG ", __esModule: true, Symbol (Symbol.toStringTag):" Module "}

результат вышеупомянутого

Не могли бы вы помочь мне? Привет