Is it good idea in React to modify attribute values of an element through Javascript?

Since React has its own copy of the DOM, what is the best way to modify an HTML element's attributes without affecting React's virtual DOM (Performance)?

Let's say I want to toggle between adding and removing an active class from a list of divs based on their visibility (Intersection Observer)

In Javascript I can just do:

if (inView) {
    element.classList.add('active')
} else {
    element.classList.remove('active')
}

Will this affect React's virtual DOM? If yes can you please suggest the better way to do it?