[Solved]-React state update produces wrong result-Reactjs

The issue here is that IDs are treated as strings in the DOM, so here: index + 1 !== selectedButton (Where selectedButton is set from e.currentTarget.id)

You are comparing a number to a string, and they will never be equal, so !== will always return true

E.g.

function example(e) {
  console.log(e.currentTarget.id)
  console.log(1 === e.currentTarget.id)
}

<input id="1" onClick="example(event)" placeholder="Click me" />

You will need to either:

• Convert the index + 1 to a string before comparing the values
• Parse the ID as a number before the comparison
• Parse the ID as a number before storing it to selectedButton

I would recommend replacing:

const clcikedDivId = e.currentTarget.id

with

const clcikedDivId = parseInt(e.currentTarget.id)