Store checkbox values as array in React

I recommend you to work with an array of all the id's or whatever you want it to be your list's keys and "map" on the array like here https://reactjs.org/docs/lists-and-keys.html. It also helps you to control each checkbox element as an item.

Neither your add or delete will work as it is.

Array.push returns the length of the new array, not the new array.

Array.splice returns a new array of the deleted items. And it mutates the original which you shouldn't do. We'll use filter instead.

Change your state setter to this:

// Since we are using the updater form of setState now, we need to persist the event.
e.persist(); 
setQuestion(prev => ({
  ...prev,
  [e.target.name]: prev.topics.includes(e.target.value)
      // Return false to remove the part of the array we don't want anymore
    ? prev.topics.filter((value) => value != e.target.value)
      // Create a new array instead of mutating state
    : [...prev.topics, e.target.value] 
}));

As regard your example in the codesandbox you can get the expected result using the following snippet

//the idea here is if it exists then remove it otherwise add it to the array.
 const handleChange = e => {
    let x = data.topics.includes(e.target.value) ? data.topics.filter(item => item !== e.target.value): [...data.topics, e.target.value]
    setQuestion({topics:x})

  };

So you can get the idea and implement it in your actual application. I noticed the problem with your code was that you changed the nature of question stored in state which makes it difficult to get the attribute topics when next react re-renders Also you were directly mutating the state. its best to alway use functional array manipulating methods are free from side effects like map, filter and reduce where possible.