Доступ к DOM элементу React

Доброго времени суток!

Разрабатываю сайт на React и понадобилось делать выпадающее по клику меню. Вопроса бы не было, если бы не одно НО. Нужно сделать плавную анимацию спуска. Насколько я понимаю, задача не сложная и самый адекватный вариант решения-CSS. Но для этого нужно обращаться к DOM-элементам и вот тут-то и встал вопрос: насколько корректно использовать всякие document.getElementById... и прочие. Или все нужно решать через рефы? Если не ошибаюсь, возможен и тот и другой варианты, больше скорее интересно что считается хорошим тоном. Или я в целом ошибаюсь?

UPD: Решил нужный мне вопрос таким способом:

const catalog = this.catalogRef.current;
if (catalog) {
    var catalogHead = catalog.getElementsByClassName('head');
    catalogHead[0].classList.toggle('activeHead'); 
}

То есть, нельзя сказать, что подобный код это "плохой тон" или какая-нибудь "бомба замедленного действия",