ReactJS - открыть всплывающее окно, нажав на элемент

Question

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

Для этого я поместил свой предмет в всплывающую кнопку. Это правильно? Если нет, пожалуйста, помогите, как это сделать.

            <Popup trigger={<button>{<div>
                <div className="visitedCountryImg">
                    <img src={props.imageSrc}/>
                </div>
                <div className="visitedCountryName" >
                    <h1>{props.name}</h1>
                    <p style={style}>Sale</p>
                </div>
                <div className="visitedCountryDescription">
                    <p>{props.description}</p>
                </div>
                <div className="visitedCountryPrice">
                    <h2>{props.price}</h2>
                </div>
            </div>}</button>} position="right center">
                <div className="visitedCountryImg">
                    <img src={props.imageSrc}/>
                </div>
                <div className="visitedCountryName" >
                    <h1>{props.name}</h1>
                    <p style={style}>Sale</p>
                </div>
                <div className="visitedCountryDescription">
                    <p>{props.description}</p>
                </div>
                <div className="visitedCountryPrice">
                    <h2>{props.price}</h2>
                </div>
            </Popup>
        </div>