Модальное окно в map() react js?

помогите, пожалуйста. я не понимаю как мне открывать модальное окно, с элементами. Есть массив, который генерит в компоненте разное количество элементов (от 4х и до 10) и для каждого должно быть модальное окно просмтотра. я через map() создаю нужное количество элементов и далее...

<div className="general">
            {this.props.filteredBooks.map((item, index) =>
            <div className="book-item" key={index}>
                <div className="size-bg" onClick={this.openModal}>
                    <img src={item.Image}/>
                </div>
                <h3>{item.Name}</h3>
                <p>{item.Author}</p>
                <div className="rating" key={index}>
                    <img src={item.ImageRating} />
                </div>
                <Modal
                    isOpen={this.state.modalIsOpen}
                    ariaHideApp={false}
                    onRequestClose={this.handleCloseModal}
                    className="Modal"
                    overlayClassName="Overlay"
                >
                    <div className="image-modal">
                        <img src={item.Image}/>
                    </div>
                    <button onClick={this.closeModal}>Закрыть модальное окно</button>
                </Modal>
            </div>

все работает как надо, но изображение там постоянно одно, а мне надо как то его менять в зависимости от нажимаемый элемент