Как присоединиться к массиву с изображениями папок в React

Question

Я пытаюсь визуализировать дочерний компонент с изображениями из локальной папки, но не знаю, как это сделать. Итак, у меня есть массив const с подробностями о нескольких проектах. У каждого проекта есть своя папка с изображениями. Имя проекта совпадает с именем папки с изображениями

Родительский компонент

import { myProjects } from '../lib/Projects'; //its array with projects

export default class Parent extends Component {
  render() {
    // function for images
    function importAll(r) {
      return r.keys().map(r);
    }

    const projectA = importAll(require.context('../../assets/images/projectA', false, /\.(png|jpe?g|svg)$/));

    const projects = myProjects.map((project, i) =>
      <Child id={i} key={i} project={project} />)

    return (
      <div className="main-container">
        {projects}
      </div>
    )
  }
}

Дочерний компонент

export default class Child extends Component {
  render() {

  const { project } = this.props;

    return (
      <div className="item">
        <div className="desc">  
          <div className="item-name">
            <p>{project.name}</p>
          </div>
          <div className="item-description">
            <p>{project.description}</p>
          </div>

          <div className="item-tools">
            <p>{project.tools}</p>
          </div>
        </div>
      // this part works well

      // How to make below part work?
        <div className="image-block">
          
          <div className="item-image-first">
            <img src={project.name[0]} alt=""/>
          </div>

          <div className="item-images">
            {project.name ? project.name.map((image, index) => {
              return (
                <div className="image-block-small" key={index}>
                  <ModalImage
                    small={image}
                    large={image}
                    alt=""
                    hideDownload={true}
                    hideZoom={true}
                    className="modal-image"
                  />
                </div>
              )
            })
            : null }          
          </div>
        </div>

      </div>
    )
  }
}

Может быть, есть способ добавить сюда дополнительный массив?

const projects = myProjects.map((project, i) =>
      <Child id={i} key={i} project={project} />)

Есть предложения?