update specific portion of array after submitting post request in next js

1.js

const submitComment = async (e, id) => {
        e.preventDefault();
        const data = {
            comment: commentData,
            article: id
        }
        await axios.post(`${process.env.NEXT_PUBLIC_ROOT_URL}/api/v1/article_comment/`, data, {
            headers: { Authorization: `Token ${token}` },
        })
        .then(res => {
            console.log(res.data)
            setData(prevData => ({
                ...prevData,
                comment: [...prevData.comment, res.data]
              }));
        })
        .catch(err => {
            console.log(err)
        })

        console.log(commentData)
        setCommentData('');
    }

2.js

// if want to updated nested field


async function submit_reply(e, id, index) {
        const input_data = {
            comment: id,
            reply: reply
        }

        await axios.post(`${process.env.NEXT_PUBLIC_ROOT_URL}/api/v1/article_reply/`, input_data, {
            headers: { Authorization: `Token ${token}` },
        })
            .then(res => {
                console.log(res)
                setData(prevData => {
                    const updatedReplies = [...prevData.comment[index].reply, res.data];
                    const updatedComment = { ...prevData.comment[index], reply: updatedReplies };
                    const updatedComments = [...prevData.comment];
                    updatedComments[index] = updatedComment;
                    return {
                      ...prevData,
                      comment: updatedComments
                    };
                  });
                console.log('comment', data?.comment[index])

            })
            .catch(err => {
                console.log(err)
            })
    }