How to remove initial default objects in reactjs

问题

when I click on checkbox my output should be this format

{permission:{group:["1","2"]}}

and also if I click second one my output should be this format

{permission:{group:["1","2"]},topgroup:["1"]}. 

currently , I see two default objects like this by using intital state

{permission:{group:[]},topgroup:[]}.

I don't need to get initial state like this {permission:{group:[]},topgroup:[]}. I just want to add data when user click on checkbox.

how can I remove initial state ?

  UNSAFE_componentWillMount() {
    this.setDefault(false);
  }

  setDefault = fill => {
    const temp = {};
    group.forEach(x => (temp[x] = fill ? groupItems : []));
    this.setState({ permission: temp });
  };

here is my codesanbox : https://codesandbox.io/s/stackoverflow-a-60764570-3982562-v1-um18k

来源：https://stackoverflow.com/questions/60790181/how-to-remove-initial-default-objects-in-reactjs