Нужно сохранять в состоянии элемент при наведении на него через (onMouseEnter
).
А в className проверять, совпадает ли этот элемент и тот, что в состоянии. И если совпадает, добавлять ему нужный класс, иначе null
.
const [currentActive, setActive] = useState()
Внутри скобок useState указываем элемент, если нужно задать его по умолчанию активным или оставляем их пустыми.
className={currentActive === el ? "active" : null}
В элементе прописываем выбор класса в зависимости от состояния.
onMouseEnter={() => setActive(el)}
Меняем состояние при наведении.