omyraucy

Если вы пользуетесь React, то забудьте про document.getElement или querySelector со всеми вытекающими. У React для этого реализован свой функционал. Почитайте про useRef в официальной документации.
Также, здесь не требуется useEffect.

import React { useState } from "react"

const Slider = ({ photo }) => {
    const [count, setCount] = useState(0)

    const next = () => {
        if (count === photo.data.photoAlbum.length - 1) { setCount(0) }
        else { setCount(count + 1) }
    }

    const prev = () => {
        if (count === 0) { setCount(photo.data.photoAlbum.length - 1) }
        else { setCount(0) }
    }

    return (
        <Carousel fade variant="dark" activeIndex={index}>
            <button onClick={prev}>Prev</button>
            <button onClick={next}>Next</button>
            { photo.data?.photoAlbum.map((res, index) => (
                { count === index && <Carousel.Item>
                    <img className="d-block w-100" src={res.photo} alt="slide" />
                </Carousel.Item>}
            )) }
        </Carousel>
    )
}

export default Slider

Попробуй так.

Почему бы тебе не попробовать функциональные компоненты React? Это во-первых.
Во-вторых, попробуй функцию добавления товара сделать немного по-другому.
Пример:
У тебя есть state.

const state = { cart: [], orders: [], modal: {} } // я буду писать, отталкиваясь от объектного React, чтобы было удобнее читать, но если будут ошибки - сори.

/*
cart - массив с корзиной. В ней хранятся все товары.
orders - массив товаров в ассортименте.
*/

Зададим примерную структуру товара:
В товаре будут следующие поля: id, title (название), description (описание), price (цена), pic (изображение).
Теперь выводим товар. Завернем его в некий div.

Распаковываем массив orders.
{ this.state.orders.map((ord, index) => <div onClick={setState(modal = ord)} key={index} className="order">/*тут распихиваешь другие поля (id, price и т.д.)*/</div>)}

Мы присвоили в modal объект order. Теперь просто пропишем условие, что modal будет появляться только тогда, когда он не равен пустому объекту.

{ Object.keys(modal) > 0 && <Modal data={modal} /> }

Смотрим, является ли объект пустым. Если да, то ничего не делаем. Если нет, то отображаем модальное окно.

Резюмируем: в state добавляем массив с товарами. Его потом перебираем через map и при клике меняем состояние modal с пустого объекта на элемент массива товара. Если клик не произошел, то модальное окно отображаться не будет.

Если надо сделать кнопку закрытия модального окна, то при нажатии кнопки можно просто сделать изменение состояние modal на пустой объект и оно будет закрываться.