I have nested objects as described below and updating states.

`
interface BookState {
name: string
authors: AuthorState[]
}

interface AuthorState {
    name: string
}


const [bookValues, setBookValues] = useState<BookState[]>(bookStateInitial)


// Add new empty author; which will later be filled from textfields
const onClickAddAuthor = (bookIndex: number) => {
    let newAuthor = { } as AuthorState
    let authors = [...bookValues[bookIndex].authors, newAuthor]
    let newBookState = update(bookValues, { [bookIndex]: { authors: { $set: authors } } })
    setBookingValues(newBookState)
}


// somewhere i populate bookValues as:
bookValues = [
    {name: "Book-1", authors: [{name: "Author-1"}] },
    {name: "Book-2", authors: [{name: "Author-1"}, {name: "Author-2"}]}
]

`

When I add an author, suppose in “Book-1” index 0, i call the onClickAddAuthor(0), the state updates and UI updates. But when I add an author, suppose in “Book-2” index 1, i call the onClickAddAuthor(1), the state value can be seen updating whin printing to console but the UI does not update. I am using immutability-helper https://github.com/kolodny/immutability-helper to update the state.

I expect to add a new empty author on index-1 as well, which should update the state and UI. I tried making deep copies of the bookValues and update the state with that, but it is not working. If it is working in index 0, it should be work on other index (1, 2, 3 .. ) as well. I am not able to understand.