Как добавить новый элемент массива в LocalStorage React?

student: {
  ['studOne']: {
    items: [{
      idStud: 'test0'
    }, ]
  },
  ['studTwo']: {
    items: [{
      idStud: 'test1'
    }, ]
  },
  ['studThree']: {
    items: [{
      idStud: 'test2'
    }, ]
  },
}

const [columns, setColumns] = useState(serviceList.student);

useEffect(() => {

  const data = localStorage.getItem('idStud')
  if (data) {
    setColumns(JSON.parse(data))
  }
}, [])
useEffect(() => {
  localStorage.setItem('idStud', JSON.stringify(columns))
})

Как сделать, чтобы при добавлении нового массива, он добавился и обновился в localStorage на стороне клиента.(Чтобы пользователь мог увидеть эти обновления и при этом, старый localStorage не перезаписывался, а просто добавил новый элемент без потерь старого localStorage)