asqwerty

className={`${styles.modal__wrapper} && ${props.isOpened ? styles.open : styles.close}` }
Я бы попробовал что-то вроде. Не уверен, что это сработает, конечно, но по идее должно.

Советую воспользоваться библиотекой для вашей задачи. В рабочих проектах работает отлично. На будущее советую искать готовое решение, бОльшую часть задач кто-то уже решил до вас и нашел наиболее оптимальный способ

Что есть общего у первого и второго массива? Это айдишник, и именно по нему нужно искать выбранный пользователем объект.
При клике на кнопку "Показать подробное описание товара" должен происходить фетч-запрос по типу getCardById(1)
И уже полученный ответ от сервера отрисовывать в модалке.

Если это данные из моков, то можно решить проблему через какой-нибудь filter.

Отрисовывать все модалки на странице не надо, это очень дорого и костыльно.

Учителем "информатики" на дистанционные курсы идите и рассказывайте , какая перспективная нынче IT-сфера, и что спрос на "специалистов" только будет расти и зарплаты повышаться, так как "нормальных" специалистов не хватает.

Вопрос не в том, сколько раз она используется. Да, сортировка и пересадки - отдельные компоненты, и айтемы внутри них - тоже отдельные компоненты.
Для того чтобы связать данные почитай про контекст API.