State not getting updated for Checkbox

I am using checkboxes to store user preferences and sending it to backend for further processing. I only wanted to store the checked values in my state object. But thats not getting updated. I tried with the Object keys method to determine the checked value. But i am unable to get the value to update my state. I am a newbiew in React, so excuse my for my doubt. I have provided a snippet below.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checkedItems: {},
      count: 0,
      formObject: {
        subjects: []
      }
    }
  }
  
  onInputChange = (value, key) => {   
    const { formObject } = this.state;
    const {...formValues} =  formObject;
    formValues[key] = value;
    this.setState((prevState, currState) => {
        return {
            ...prevState,
            formObject: formValues
        };
    }, () => console.log(this.state.formObject));
  }
  
  handleChange = (event, formKey) => {
    const {name, checked} = event.target;
    const updatedCheckedItems = {...this.state.checkedItems, [name]: checked };

    this.setState({
        checkedItems: updatedCheckedItems,
        count: Object.values(updatedCheckedItems).filter((value) => value).length
    }, () => {this.onInputChange(Object.keys(updatedCheckedItems), 'subjects')});
  }
  
  render() {
  const checkedValues = {...this.state.checkedItems};
  const checkedCount =  Object.values(checkedValues).filter((value) => value).length;
  const checkboxes = [
      {
          name: "Math and economics",
          key: "mathsandeconomics",
          label: "Math and economics"
      },
      {
          name: "Science",
          key: "Science",
          label: "Science"
      },
      {
          name: "World languages",
          key: "World languages",
          label: "World languages"
      },
      {
          name: "Government and politics",
          key: "Government and politics",
          label: "Government and politics"
      },
      {
          name: "Art and design",
          key: "Art and design",
          label: "Art and design"
      },
      {
          name: "Technology",
          key: "Technology",
          label: "Technology"
      },
      ];
    return (
      <div className="App">
        <h1>Hello React</h1>
        {
          checkboxes.map((item, index) => (
            <label key={item.key}>
              <input type="checkbox" name={item.name} checked={this.state.checkedItems[item.name] || false}
              onChange={this.handleChange}
              disabled={!checkedValues[item.name] && checkedCount > 2} />{item.name}
            </label>
          ))}
        }
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>