Whats the difference in this codes and why does the later setState renders and not the first one?

Question

toggleOn here is a function fired on an onClick event

This was my initial code. the code was working fine in terms altering the data that i wanted to change but somehow react was not rendering it to screen. Also when i went back to my code and save it from there then the component was re-render with updated content

  const toggleOn = (ids) => {
      setboxData(prevBoxData => { 
        prevBoxData.map(item => {
          if(item.id === ids){
            item.on = !item.on;
          } 
          return item;
        })

      return prevBoxData;
      })
    }

Why the code below re-renders my page but not the first one?

 setboxData(prevBoxData => {
        let newData = [];
        prevBoxData.map(item => {
          if(item.id === ids){
            item.on = !item.on;
          } 
          newData.push(item);
        })
      
        return newData;
      })

My whole react component

const Boxes = () => {
    const [boxData, setboxData] = React.useState(Data);

    const toggleOn = (ids) => {
      setboxData(prevBoxData => { 
      
        prevBoxData.map(item => {
          if(item.id === ids){
            item.on = !item.on;
          } 
          return item;
        })

      console.table(prevBoxData);
      })
    }
    
    let boxes = boxData.map((item) => {
      console.log("Item in map: ",item)
      return(  
           <Box bData = {item} handleClick = {toggleOn} />
      )
    })
    
  return (
    <div className='box-container'>
      {boxes}
    </div>
    
  )
}