React security: state manipulation

I am developing a React project, and love how dynamic it can be. However, when dealing with dynamic security features - in my case, a Google reCAPTCHA, I am getting quite worried about the possibility of users manipulating my states and properties.

For instance, this is how I handle reCAPTCHA:

class Create extends Component {
  constructor() {
    super();
    this.onRECAPTCHA = this.onRECAPTCHA.bind(this);
    this.state = {captcha: false}
    // ...
  }

  onRECAPTCHA(value) {
    if (value == null) {
      this.setState({captcha: false})
    }
    this.setState({captcha: true})
  }
}

I have a handler for a button onClick, which in the function, tests against this.state.captcha before proceeding. It works as intended, but I stumbled upon react-dev-tools and found that I was able to manually manipulate my captcha state! Am I blatantly missing something, or should I not be setting captcha as a state/property? This concerns me about several other states/props I have set as well. All of my validation is stored this way.

Ultimately, you'll need authorization to take place in a secured setting, and the browser isn't that place. If you're guarding a form submittal, for example, it's up to you to have the server-side code that processes the submittal to validate that the captcha response is as expected. The fact that client-side state can be manipulated shouldn't really matter as long as you're not using that as your sole source of validation/authorization.