Drum Pad Machine- Why is state not updating-Help Please

Hi

I have two object arrays with two different PadBanks, bankOne and BankTwo. Everytime TogglePadBank div is clicked , the buttonState state property in this.state changes to point to either one of those PadBanks. Im console logging this.state and it is actually changing but whenever I click on padkeys it seems as state never changed. Anyone knows why components are not updating? Would Really appreciate some help

here is my pen: https://codepen.io/tonytony92/pen/QWbQyxW?editors=1011

and here is my code so far:

const bankOne = [{
  key:"Q",
  col:"blue",
  audioId: '1',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3'
}, {
  key:"W",
  col:"blue",
  audioId:'2',
  url: 'https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3'
} ]

const bankTwo = [{
    key:"Q",
    col:'blue',
    audioId:'3',
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
  }, {
    key:"W",
    col:"blue",
    audioId:"4",
    url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
  } ]




class Buttons extends React.Component{
  constructor(props){
    super(props)
    
   
  }
 
  
  render(){
    return(
    <div>
      <div style={{width:'100px', height:"100px", backgroundColor:this.props.color}} id={this.props.id} onClick={this.props.handleClick}><h3>{this.props.id} </h3></div>
        <audio id={this.props.audioId}>
        <source src={this.props.urlSource}/>
        </audio>
     </div>
    
    )
  }
  
}

class MyApp extends React.Component{
  constructor(props){
    super(props)
    this.state={
      buttonState:bankOne,
      padBankCol:"blue",
      currentPadBank:"bankOne"
    }
    this.handlesClick=this.handlesClick.bind(this)
    this.handleKeyDown=this.handleKeyDown.bind(this)
    this.playSound=this.playSound.bind(this)
    this.togglePadBank=this.togglePadBank.bind(this)
  }
  handlesClick(event){
    let indx=""
    let clickId=event.target.id
    let newState=Object.assign({},this.state)
    for(let i=0;i<this.state.buttonState.length;i++){
      if(this.state.buttonState[i].key===clickId){
        let soundId1=this.state.buttonState[i].audioId
        indx=i
        newState.buttonState[i].col="red"
        this.setState({
     newState  
    }) 
        this.playSound(soundId1)
        }
      }
     setTimeout(()=>{ 
       newState.buttonState[indx].col="blue"
       this.setState({
     newState  
    }),2200
        })
    
    }
  handleKeyDown(event){
    let indx=""
    let keyPress=String.fromCharCode(event.keyCode)
    console.log(keyPress)
    let newState=Object.assign({},this.state)
    for(let i=0;i<this.state.buttonState.length;i++){
      if(this.state.buttonState[i].key===keyPress){ 
        let soundId1=this.state.buttonState[i].audioId
        indx=i
        newState.buttonState[i].col="red"
       this.setState({
     newState  
    })
        this.playSound(soundId1)
        }
      
      }
    
    setTimeout(()=>{  
  newState.buttonState[indx].col="blue"
       this.setState({
     newState  
    }),1000
        })
   
  }
  playSound(id){
    let sound=document.getElementById(id)
    sound.play()
  }
  
  togglePadBank(){
    if(this.state.buttonState===bankOne){
      this.setState({
        buttonState:bankTwo,
        padBankCol:"red",
       currentPadBank:"bankTwo"
      })
    console.log(this.state.buttonState)
    } 
      else if(this.state.buttonState===bankTwo){
        this.setState({
          buttonState:bankOne,
        padBankCol:"blue",
       currentPadBank:"bankOne"
        })
        console.log(this.state.buttonState)
      }   
  }
  
  render(){
    document.addEventListener("keydown",this.handleKeyDown)
    return(
      
    <div>
        <div style={{width:'400px',height:'400px', display:'flex',flexDirection:'row',backgroundColor:'green'}}>
        <Buttons id="Q" color= {this.state.buttonState[0].col} handleClick={this.handlesClick} urlSource={this.state.buttonState[0].url} audioId={this.state.buttonState[0].audioId}/>
          <Buttons id="W" color={this.state.buttonState[1].col} handleClick={this.handlesClick} audioId={this.state.buttonState[1].audioId} urlSource={this.state.buttonState[1].url} />
          <div style={{width:"100px",height:"50px",position:"relative",backgroundColor:this.state.padBankCol,left:"70px",top:"100px"}} onClick={this.togglePadBank}>Pad Bank Toggle</div>
        </div>
    
        
 
     </div>
    )
  }
  
}

ReactDOM.render(<MyApp />, document.getElementById('root'))