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

Question

[oleg]

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)