React - отображение через массив изображений

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

import firstProjectPhoto from '../img/picOne.png';
import secondProjectPhoto from '../img/picTwo.png';
import thirdProjectPhoto from '../img/picThree.png';
import ListOfProjects from "./subcomponents/ListOfProjects";


const projects = [{
    photo:[{firstProjectPhoto},{secondProjectPhoto},{thirdProjectPhoto}],
    },
    {
    text:["Project number one", "Project number two", "Project number 3"],
    }];



class Projects extends Component {
    render() {
        return (
            <Grid className = "text-center" id = "listOfProjects">
                <PageHeader className = "projects-header">My Projects</PageHeader>
                {projects.map(e => 
                    <ListOfProjects
                    photo = {e.photo}
                    text = {e.text}
                    />
                )}
            </Grid>
        );
    }
}

export default Projects;

новый компонент

class ListOfProjects extends Component {
    render() {
        return (
            <Row className = "show-grid text-center projects-list">
                <Col xs = {1} sm = {1} className = "projects">
                    <Image src = {this.props.photo} thumbnail responsive/>
                    <p>{this.props.text}</p>
                </Col>
            </Row>
        );
    }
}

export default ListOfProjects;

ОБНОВЛЕНО:

На самом деле есть некоторый прогресс, спасибо, ребята :) проблема была в структуре проекта const, однако он все же показывает img src как [объект Object] вместо обычного изображения

const projects = [{
        photo: {firstProjectPhoto},
        text:"first project"
    },
    {
        photo: {secondProjectPhoto},
        text:"second project"
    },
    {
        photo: {thirdProjectPhoto},
        text:"third project"
    }
]


           <Grid className = "text-center" id = "listOfProjects">
                <PageHeader className = "projects-header">
My Projects    </PageHeader> 
                {projects.map((e,i) =>
                    <ListOfProjects
                    photo = {e.photo}
                    text = {e.text}
                    key = {i}
                    />
                )}
            </Grid>

ОБНОВЛЕНО

Я должен быть без {} Теперь работает отлично :) Всем спасибо за помощь