Как инициировать всплывающее окно с некоторыми конкретными данными в компоненте, который можно использовать повторно

Question

Мой вопрос: как я могу это сделать, чтобы мой PopUp отображал некоторые конкретные данные, когда я нажимал на мой компонент ServiceBox. Дело в том, что я хочу показывать больше информации о каком-либо сервисе каждый раз, когда нажимаю на него. У меня есть 8 услуг, каждый из которых имеет каждый пакет информации.

        <div className={classes.iconBox}>
          <div className={classes.icon}>
            <MdArrowForward fontSize="30px" style={{ fontWeight: 600 }} />
          </div>
        </div>
        <h3>
          <span>Read more</span>
        </h3>
      </div>
      {show ? <PopUp title={props.title}/> : null}

Я пытался использовать Multi setState для каждого компонента при нажатии, но он также делал бесконечный цикл. В компоненте Службы у меня есть 8 служб, которые сделаны из ServiceBoxes. Может быть, использовать Ref или что-то? Еще раз: я хочу обработать showPopUpHandler для конкретной службы, чтобы она не влияла на другую.