Adding numbers while page renders for n number of times in next js project

Question

I had a table, data of each row for which is getting generated after an API call. I am trying to add a total column to this. I need to add data for each row. How can this babe done in react/next. I am trying to use useStatus but its behaving weird.

In addition I need this to be done only for specific number of rows i.e. for only 1st 5 rows. all the other rows will appear but the total will only have the sum of 1st 5 rows for each column.

for this to achieve I was using useEffect inside which I was keeping a condition that if the data counts 5 or less then add the data.

here, a const value will always be updated, so obviously that's not a solution but useState is something that needs to be handled correctly.

    const [count, setcount] = useState(initialState)

    useEffect(() => {
        let max = 1
        for (const i of Object.entries(props.finalSelect)) {
            if (i[1].length > 0) {
                max *= i[1].length
            }
        }

        if (props.index < max) {
            const value = {...count}
            console.log("1111 !!!", value.severity.critical)
            console.log("2222 !!!", props.data.bugs_data.severity.critical_bugs_count)
            value.severity.critical += props.data.bugs_data.severity.critical_bugs_count
            console.log("3333 !!!", value.severity.critical)
            setcount(value)
        }
        
        
    }, [props.finalSelect])

The console log is:

[Log] 1111 !!! – 0
[Log] 2222 !!! – 9
[Log] 3333 !!! – 9
[Log] 1111 !!! – 0
[Log] 2222 !!! – 0
[Log] 3333 !!! – 0
[Log] 1111 !!! – 0
[Log] 2222 !!! – 6
[Log] 3333 !!! – 6
[Log] 1111 !!! – 0
[Log] 2222 !!! – 3
[Log] 3333 !!! – 3

seems like setcount is not setting the value

any suggestions ?