My problem in short: I use 2 contexts, the first one consumes an array from the second. It looks like when the second updates this array, the first context still holds the old state…

Long version:

Working on a music player, I have:

PlaylistContext: It does have a { lib } variable that contains an array of songs.

MusicContext: It holds a single song using the following code:

const { lib } = useContext(PlaylistContext) // Consuming the song playlist

const [item, setItem] = useState(null) // Storing the current song

const findItemById = (id) => { // Find a song through id from the playlist
    return lib.find((item) => item.id === id)
}

And then when user chooses a song:

const it = findItemById(itemId)
setItem(it)

Problem is: when lib changes (for example I update the cover jacket of the album or anything related to the ongoing song), it does NOT reflect in my MusicContext.

Meaning the song is played, but gets never updated with new info.

My initial understanding was that since item comes from lib, it is a reference, so any change to lib in this item should be reflected by REACT.

Now I am starting to think that I should update my item whenever my lib changes, but I feel like I am loosing the use of contexts here.

Any help appreciated ^^