Checkbox toggle is not working properly in react.js

I think you're mixing up controlled and uncontrolled components/elements. If you want to allow the checkbox to toggle you should rather pass the value as the default value instead of the value, and pass the checked value to your callback

<input
  id="switchCheckboxInputAssert"
  className="switch-checkbox-input"
  type="checkbox"
  // pass state value as default checked value
  defaultChecked={this.state.option.assert}
  // pass checked value to callback
  onChange={evt => this.assertChange(evt.target.checked)}
  disabled={!this.props.canBeSolution}
/>

You don't need to use value attribute, just use checked attribute without any logic as you are already taking care of login inside assertChange function for checkbox in react.

<input
  id="switchCheckboxInputAssert"
  className="switch-checkbox-input"
  type="checkbox"
  checked={this.state.option.assert}
  onChange={this.assertChange}
   />

working demo

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
state = {
  option: {
    'something': 'new something',
    assert: true
  }
}
  assertChange = () => {
    this.setState({
      option: { ...this.state.option, assert: !this.state.option.assert }
    })
  }
  render() {
    console.log(this.state.option)
    return (
      <div className="App">
        <input
          id="switchCheckboxInputAssert"
          className="switch-checkbox-input"
          type="checkbox"
          checked={this.state.option.assert}
          onChange={this.assertChange}
           />
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Hope that helps!!!