map（）中的模态窗口反应js

请帮帮我。我不明白如何打开带有元素的模式窗口。有一个数组可以在组件中生成不同数量的元素（从 4 到 10），并且每个元素都应该有一个模态查看器窗口。我使用 map() 创建所需数量的元素，然后...

 import React, { Component } from "react";
 import Modal from "react-modal";

 class General extends React.Component {
constructor(){
    super();
    this.state = {
        modalIsOpen: false
    };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
}

openModal() {
    this.setState({modalIsOpen: true});
}


closeModal() {
    this.setState({modalIsOpen: false});
}

render() {

    return(
        <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>
            </div>
            )}
            <Modal
                isOpen={this.state.modalIsOpen}
                ariaHideApp={false}
                className="Modal-book"
                overlayClassName="Overlay-book"
            >
                <div className="image-modal">
                </div>
                <button onClick={this.closeModal}>Закрыть модальное окно</button>
            </Modal>
        </div>
    )
}


}

导出默认General；

一切正常，但图像在那里总是一样的，我需要根据被按下的元素以某种方式改变它