Как добавлять/удалять класс при наведении?
Нужно сохранять в состоянии элемент при наведении на него через (onMouseEnter).

А в className проверять, совпадает ли этот элемент и тот, что в состоянии. И если совпадает, добавлять ему нужный класс, иначе null.

const [currentActive, setActive] = useState()
Внутри скобок useState указываем элемент, если нужно задать его по умолчанию активным или оставляем их пустыми.

className={currentActive === el ? "active" : null}
В элементе прописываем выбор класса в зависимости от состояния.

onMouseEnter={() => setActive(el)}
Меняем состояние при наведении.
const [obj, setObj] = useState(null);
let classRef = useRef([]);
function testfunc(index, e) {
    if (obj !== null) {
      classRef.current[obj].classList.remove("img45test");
    }
    e.currentTarget.classList.add("img45test");
    setObj(index);
  }
в общем как то так

в итерируемом элементе прописать ref={(el) => (classRef.current[index] = el)}
1. пихаем все элементы в useRef
2. далее при  первом наведении состояние = Null значит просто добавляем класс и пишем индекс
3. второе наведение с помощью рефа убираем класс у элемента с предыдущем индексом и добавляем к текущему, и опять пишем индекс
4. повторяем по кругу
честно сам не понял как к этому пришел
осталось как то по дефолту сделать сделать элемент с индексом 0 в фокусе со старта