Estoy tratando de tener una sección HTML regular en un componente basado en la clase React donde estoy tratando de cambiar el color de fondo en un evento basado en el estado. Estoy tratando de usar un document.getElementById() para manipular el DOM con Vanilla JS, pero no puedo acceder a él. Esto es lo que estoy intentando hasta ahora:

 this.setState({state: true}, () => { if (this.props.settings?.use_colors) { const section = document.getElementById('section') const colors = ['red', 'green'] for (let i=0; i<colors.length;) { section.style.backgroundColor = colors[i] if (condition) i++ if (i = colors.length - 1) { i = 0; } } } });

Y esta es la sección de render/return:

 <section className="section" style={{ backgroundColor: colors[i] ?? undefined}}> <Component> <Components> ... </Components> </Component> </section>

¿Cuál sería la mejor manera de agarrar esa sección?