How to properly manage Dom in react?

Question

React

I would like to understand how to properly work with the DOM in react, when, for example, there are 20 elements that need to be animated using gsap .
gsap.to(elem, ....)

1) Set ref={elem1} for each element , first create a constant in the function const elem = useRef();
2) Create one constant with the array const elems = useRef([]) and store the elements ref={el => elems.current.push(el)} into it and keep the numbering in mind ))
3) Set the parent ref={page } and access elements via page. querySelector ('.elem')

The first element following the documentation is very cumbersome and the number of variables created is intimidating.
The second one will look decent if you add the keys
. The third way, so to speak, "not in react'ovski"

Maybe there is another way?
And which option is the most correct when there are many elements that need to be animated?