Multiple logically separated radio buttons in the same ReactJS form

I am trying to build a very simple form structured with (ideally) a set of radio buttons, a set of checkbox and then another set of radio buttons. These are three different sections of the form I am trying to build.

I would like to keep the current form but I want the two set of radio buttons to be completely independent. First I am not sure they are with the current structure of the code. Second, for some reason, I can pick one option in the first set of radio buttons but the second set seems to be disabled (I can't pick neither long-running nor event-driven).

How can I achieve that? Thanks.

import React, { Component } from "react";

class App extends Component {
  constructor() {
    super();
    this.state = {
      customer: "individualDev",
      programmingmodel: "long-running",
      isWebService: false,
      isBatchJob: false,
      isAiMl: false,
      isDatabase: false,
      isWorker: false,
    };
  }

  onValChange = (event) => {
    this.setState({
      customer: event.target.value,
    });
  };

  onCheckValChange = (e) => {
    this.setState({ [e.target.name]: e.target.checked });
  };

  onSubmitForm = (event) => {
    event.preventDefault();
    console.log("state", this.state);
  };

  render() {
    return (
      <div className="App">
        <form onSubmit={this.onSubmitForm}>
          <br/>
          <b> Customer segment </b>
          <br/>
          <br/>
          <label>
            <input
              type="radio"
              value="IndividualDev"
              checked={this.state.customer === "IndividualDev"}
              onChange={this.onValChange}
            />
            <span>Individual Dev </span>
          </label>

          <label>
            <input
              type="radio"
              value="Startup"
              checked={this.state.customer === "Startup"}
              onChange={this.onValChange}
            />
            <span>Startup </span>
          </label>

          <label>
            <input
              type="radio"
              value="smallBusiness"
              checked={this.state.customer === "smallBusiness"}
              onChange={this.onValChange}
            />
            <span>Small Business </span>
          </label>

          <label>
            <input
              type="radio"
              value="mediumBusiness"
              checked={this.state.customer === "mediumBusiness"}
              onChange={this.onValChange}
            />
            <span>Medium Business </span>
          </label>

          <label>
            <input
              type="radio"
              value="enterpriseIt"
              checked={this.state.customer === "enterpriseIt"}
              onChange={this.onValChange}
            />
            <span>Enterprise IT </span>
          </label>

          <label>
            <input
              type="radio"
              value="enterpriseLob"
              checked={this.state.customer === "enterpriseLob"}
              onChange={this.onValChange}
            />
            <span>Enterprise LOB </span>
          </label>
          <br/>
          <br/>
          <br/>
          <b> Workload </b>
          <br/>
          <br/>
          <label>
            <input
              type="checkbox"
              name="isWebService"
              checked={this.state.isWebService}
              onChange={this.onCheckValChange}
            />
            <span>Web Service </span>
          </label>
          <label>
            <input
              type="checkbox"
              name="isBatchJob"
              checked={this.state.isBatchJob}
              onChange={this.onCheckValChange}
            />
            <span>Batch Job </span>
          </label>
          <label>
            <input
              type="checkbox"
              name="isWorker"
              checked={this.state.isWorker}
              onChange={this.onCheckValChange}
            />
            <span>Worker </span>
          </label>
          <label>
            <input
              type="checkbox"
              name="isAiMl"
              checked={this.state.isAiMl}
              onChange={this.onCheckValChange}
            />
            <span>AI/ML </span>
          </label>
          <label>
            <input
              type="checkbox"
              name="isDatabase"
              checked={this.state.isDatabase}
              onChange={this.onCheckValChange}
            />
            <span>Database </span>
          </label>
          <br/>
          <br/>
          <br/>
          <b> Programming model </b>
          <br/>
          <br/>
          <label>
            <input
              type="radio"
              name="long-running"
              checked={this.state.programmingmodel === 'long-running'}
              onChange={this.onValChange}
            />
            <span>Long-running </span>
          </label>
          <label>
            <input
              type="radio"
              name="event-driven"
              checked={this.state.programmingmodel === 'event-driven'}
              onChange={this.onValChange}
            />
            <span>Event-driven </span>
            </label>
          <br/>
          <br/>
          <br/>
          <br/>
          <button type="submit">Submit</button>
        </form>
      </div>
    );
  }
}

export default App;