Push value of state variable in state array in react

Question

I am facing wierd issue here.

The senario is : I have 2 variables(lets say a,b) in state of component: 1 is 2d array and other is Object. I have multiple small divs on click of which i am storing 1/0 at a's index(like if i click 1st div in 1st row: i will update value of a[0][0] to 1).

And then there are buttons below that. One button will insert the current selection in the this.state.b array and clear the selections after insertion. One is there just to clear the selection And other buttons are for each saved selection. So whenever i click on any saved selection button , the divs selected in that selection should get selected. Everything upto this works fine.

Now the issue here is, when i save a selection, then click on that saved selection button and update it, Even if i dont click on save button the selection gets updated at that index and when i save it, it creates another entry in that object.

For ex: I have saved single selection. Assume b will have value like {0:[[0,0][1, 0]]} and then I click on selection 0 button,it will show just 1st div in second row selected. Then i select div at postion [0,0] it automatically updates the varibale b as {0:[[1,0][1,0]]}. and when i click save button, it will also push another entry in b like {0:[[1,0][1,0]], 1:[[1,0][1,0]]}.

I dont want to update previous entry, I just want to add new entry on click of save button.

this is my save function:

  handleSave(index) {
    let routes = this.state.routes;
    const selectedArray = this.state.selectedArray; 
    routes[index] = selectedArray;
    this.setState({routes: routes});
    this.setState({selectedArray: new Array(2).fill(0).map(() => new Array(2).fill(0))});
  }

this is my div pattern

<div className="content">
          <div>
            {
              length.map(key => {
                return <div key={key}>{
                  length.map(innerKey => {
                    return <div key={key +''+ innerKey} className={"radio " + (this.state.selectedArray[key][innerKey] === 1 ? "selected" : "unselected")} onClick={(e) => {
                      let op = this.state.selectedArray;
                      op[key][innerKey] = op[key][innerKey] === 0 ? 1 : 0;
                      this.setState({selectedArray: op})
                  }
                  }></div>
                })}</div>
              })
            }
            <button className="save" onClick={() => this.handleSave(Object.keys(this.state.routes).length)}>Save</button>
            <button className="save" onClick={() => this.setState({selectedArray: new Array(2).fill(0).map(() => new Array(2).fill(0))})}>Clear</button>
          </div>
          <div>
            {Object.keys(this.state.routes).map((key, index) => {
              return <div key={index}><button className="save" onClick={() => {console.log(key);this.setState({selectedArray: this.state.routes[key]})}}>Selection {index}</button>
                </div>
            })}
          </div>
        

any solution to this?

################################# Updates ########################## Tried this.Still it is not working:

handleSave(index) {
    const selectedArray = [...this.state.selectedArray]; 
    this.setState({routes: {...this.state.routes, [index]: selectedArray}});
    this.setState({selectedArray: new Array(14).fill(0).map(() => new Array(14).fill(0))});
  }

let op = [...this.state.selectedArray];
                      op[key][innerKey] = (op[key][innerKey] === 0 ? 1 : 0);
                      this.setState({selectedArray: op})

Thanks