I'm trying to have a regular HTML section in a React class-based component where I'm trying to change the background color on a state-based event. I'm trying to use a document.getElementById() to manipulate the DOM with vanilla JS but I'm not able to get to it. This is what I'm trying so far:

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;
      }
    }
  }
});

And this is the render/return section:

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

What would be the best way to grab that section?