선생님 개인프로젝트 도움 요청 드립니다

해당 컴포넌트는 db에 있는 리스트를 받아와서 수정하는 컴포넌트입니다
불러온 db 리스트에 id를 따로 설정해 놓지 않아서
해당 배열 길이로 임시 id를 붙여 추가와 삭제 작업이 가능하게 하려고 합니다


기존 리스트를 보여주는 것 까진 작업이 되었고
nextId 변수를 이용해 리스트가 새로 추가될 때 마다 
기존 리스트 총 갯수 + 1
가 되게 코딩을 하였는데요
1개까지는 id 숫자가 올라가는데 그 이후로는 고정이 되어 오류가 발생합니다

3일째 이것저것 해봐도 해결이 되지않아 선생님께 도움을 요청드립니다!

import React, { useCallback, useEffect, useRef, useState } from 'react';
import Insertlist from './Insertlist';
import Insertprogram from './Insertprogram';

function AddInput({addOpt, selectedShow}) {
const prg = selectedShow.program;
const anc = selectedShow.anchor;
const [ array, setArray ] = useState([]);
 
let nextId = useRef(0);

// db에 있는 데이터를 미리 뿌려줌
if (addOpt == 'program') {
let totalNumber = prg.artist.length;
for ( let i = 0; i <= totalNumber - 1; i++ ) {
 array.push({
 id: i,
 artist: prg.artist[i],
 title: prg.title[i]
 });
 }
 nextId = totalNumber;
 } else if (addOpt == 'anchor') {
let totalNumber = anc.artist.length;
for ( let i = 0; i <= totalNumber - 1; i++ ) {
 array.push({
 id: i,
 artist: anc.artist[i],
 title: anc.title[i]
 });
 }
 nextId = totalNumber;
 }

const [ programs, setPrograms ] = useState(array);

// 리스트 추가
const onInsert = useCallback((artist ,title) => {
let program = {
 id: nextId,
 artist,
 title
 }
setPrograms(programs.concat(program));
 nextId += 1;
 console.log(programs)
 },[programs])

// 해당 리스트 삭제
const onRemove = useCallback(id => {
const copy = [...programs];
const deleted = copy.filter(program => program.id !== id);
 
setPrograms(deleted);
 },[programs]
 )

return (
<>
{/* 기존 or 추가 되는 리스트 */}
<Insertlist programs={programs} onRemove={onRemove} addOpt={addOpt} />

{/* 데이터 추가하는 input */}
<Insertprogram onInsert={onInsert} />
</>
 );
}

export default AddInput