Лайтбоксы на массиве изображений

Я пытаюсь создать галерею изображений, сохраненных в локальной папке, и поэтому визуализирую их с помощью array.map. Это прекрасно работает. Но я застрял на вводе лайтбокса для этих изображений. Я использую пакет lightbox-react и внес некоторые изменения, но он не работает.

Вот моя попытка:

import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
import Lightbox from 'lightbox-react';
import AddPhoto from './addPhoto';

//lazy-loading images
import ObserverWrapper from '@emarketeross/simple-react-intersection-observer';

class ArchitectureGallery extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false,
            photoIndex: 0
        }
    }

    render() {
        const { photoIndex, isOpen } = this.state;

        //map through all images in folder
        let names = ['1','2','3','4','5','6', ].map( (name, index) => {
            return <img
                key = {index}
                className = "img-responsive"
                alt = ""
                src = {require(`../../assets/images/architecture/${name}.jpeg`)}
                onClick = {() => this.setState({ isOpen: true})}
                />
        } );
        return (
            <div className = "img-container">
                <Grid className = "container">
                    <ObserverWrapper>
                    <Row>
                        <Col className = "col-xs-12 col-sm-6 col-md-6 col-lg-6">
                            { names }

                            {isOpen && (
                              <Lightbox
                                mainSrc = {{names}[photoIndex]}
                                nextSrc = {{names}[(photoIndex + 1)] % names.length}
                                prevSrc = {{names}[(photoIndex + names.length - 1) % names.length]}
                                onCloseRequest = {() => this.setState({ isOpen: false })}
                                onMovePrevRequest = {() =>
                                    this.setState({
                                        photoIndex: (photoIndex + names.length - 1) % names.length
                                    })
                                }
                                onMoveNextRequest = {() =>
                                    this.setState({
                                        photoIndex: (photoIndex + 1) % names.length
                                    })
                                }
                                />
                            )}
                        </Col>
                    </Row>
                    </ObserverWrapper>
                </Grid>
            </div>
        );
    }
}

export default ArchitectureGallery;

Я предполагаю, что проблема в определении свойств лайтбокса, консоль отображает Failed prop type: The prop mainSrc is marked as required in ReactImageLightbox, but its value is undefined.

Любая помощь будет оценена по достоинству.